Split vendor libraries into multiple chunks with webpack

Question

I'd like to split my vendor code into two chunks, one that contains all angular libraries, and another that contains everything else.

My angular app has a single entry point and is setup something like:

entry: {
    app: './path_to/app.js',
    vendor: ['jquery', 'moment', 'numeral'],
    'vendor.angular': ['angular', 'angular-route', 'angular-numeraljs']
}

I then use the CommonsChunkPlugin to configure the two other bundles:

new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    chunks: ['app'],
    warnings: false,
    filename: 'vendor.bundle.js'
})
new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor.angular',
    chunks: ['app'],
    warnings: false,
    filename: 'vendor.angular.bundle.js'
})

This generates 3 files:

Version: webpack 1.13.1
Time: 12719ms
                   Asset     Size  Chunks             Chunk Names
           app.bundle.js  19.2 kB       0  [emitted]  app
        vendor.bundle.js   484 kB       1  [emitted]  vendor
vendor.angular.bundle.js   652 kB       2  [emitted]  vendor.angular
   [0] multi vendor.angular 124 bytes {2} [built]
   [0] multi vendor 88 bytes {1} [built]
    + 124 hidden modules

app.bundle.js contains just my app code.
vendor.bundle.js contains all 3rd party libs excluding angular stuff
vendor.angular.bundle.js contains all angular stuff AND all my 3rd party libs that are already inside of vendor.bundle.js.

Is there anyway to have JUST the angular modules bundled in vendor.angular.bundle.js, without automatically including the other 3rd party libs?

Kalin

What happens if you call the chunk angular_stuff instead of vendor.angular ? ... It's just a hunch, but maybe the dot-notation is causing webpack to include the vendor stuff. – Hands

@Hands Does not work, tried that. No difference in sizes. – Kalin

Also, looking at the docs. There is an option in CommonsChunkPlugin minChunks: Infinity which purpose is to: with more entries, this ensures that no other module goes into the vendor chunk ... so maybe that's the missing option. – Hands

@Hands Setting that in either or both of the vendor/angularVendor sections does not change the output file size. – Kalin

... ok, last idea... if you change the order of the CommonsChunkPlugin-blocks... does it change the file sizes?... maybe because the first optimized common chunk has the 'app'-chunk, then the second one auto-includes the first one. – Hands

... if that's the problem, maybe it would help to first create the bundles with the entries + an output block output: {path: path.join(__dirname, "dist"), filename: "[name].bundle.js"} And then optimze them afterwards? – Hands

And maybe trying this plugin for the minifying process: webpack.optimize.UglifyJsPlugin .... sorry for the multiple trial and error :-).... ok, I'll be away for a while. Good luck in the meanwhile. – Hands

Answer 1

Figured this out:

The order of the CommonsChunkPlugin's matter in the plugins array.

To get the desired 'chunking', here's the change I had to make:

1. Re-order the CommonsChunkPlugins so that the angular chunk was first.
2. Update the 'vendor' config below to use 'vendor.angular' in the 'chunks' array.

The updated CommonsChunkPlugins now looks like:

new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor.angular',
    chunks: ['app'],
    warnings: false,
    filename: 'vendor.angular.bundle.js'
})
new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    chunks: ['vendor.angular'],
    warnings: false,
    filename: 'vendor.bundle.js'
})

The above now yields:

Version: webpack 1.13.1
Time: 7451ms
                   Asset     Size  Chunks             Chunk Names
           app.bundle.js  19.2 kB       0  [emitted]  app
        vendor.bundle.js   484 kB       1  [emitted]  vendor
vendor.angular.bundle.js   221 kB       2  [emitted]  vendor.angular
   [0] multi vendor.angular 124 bytes {2} [built]
   [0] multi vendor 88 bytes {1} [built]
    + 124 hidden modules

Running:

webpack --progress --display-modules --display-chunks -v

I'm able to verify that all angular related modules are now in the vendor.angular.bundle.js, and all non-angular modules are indeed in vendor.bundle.js

Kalin