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.

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.