1. Tutorials
  2. webpack

Webpack Split Application Code And Vendor Packages

September 16, 2017

Edit webpack config file (e.g. webpack.config.js). It will generate a separate vendor.js files for vendor packages in node_modules directory.

Note: the following code is based on the work of vuejs-templates/webpack

var webpack = require('webpack')

module.exports = {
  ...
  plugins: [
    ...  
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'vendor.js',
      minChunks: function (module, count) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
  ],  
  ...
};

If you are extracting CSS with ExtractTextPlugin and want to generate vendor.css as well, you should replace /\.js$/ with /\.(js|css|sass|scss|less)$/ for the above configuration.

❤️ Is this article helpful?
Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.
👶 Apps I built
Pixtory App (Alpha) - easily organize photos on your phone into a blog.
COVID-19 - data, chart, information & news.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings.
Travelopy - travel discovery and journal
LuaPass - offline password manager
WhatIDoNow - a public log of things I am working on now
By Desmond Lua
A dream boy who enjoys programming and travelling, maker of Travelopy. Follow me on @d_luaz.
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.