webpack-vendor-chunk-plugin

Removes the runtime code from a webpack chunk.

Usage

new VendorChunkPlugin(chunkNames), where chunkNames can be either an array of chunk names or a single chunk name.

Example

webpack.config.js:

var webpack = require('webpack');
module.exports = {
  entry: {
    app: './app.js',
    vendor: ['react', 'redux'],
  },
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
  ],
};

Will create two files:

• vendor.js, which contains the react and redux modules and all their dependencies.
• bundle.js, which contains your application code and the rest of its dependencies.

While you would expect vendor.js to only execute the react and redux modules once they are required from within bundle.js, this is not the case. In fact, upon loading bundle.js, an equivalent to the following code is executed:

require('react');
require('redux');

This plugin removes this runtime code from your vendor chunks.

The previous configuration becomes:

var webpack = require('webpack');
var VendorChunkPlugin = require('webpack-vendor-chunk-plugin');
module.exports = {
  entry: {
    app: './app.js',
    vendor: ['react', 'redux'],
  },
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
    new VendorChunkPlugin('vendor'),
  ],
};