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?

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. — andzep, Jul 29 '16 at 16:36
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. — andzep, Jul 29 '16 at 16:54
@andzep Setting that in either or both of the vendor/angularVendor sections does not change the output file size. — Nick, Jul 29 '16 at 17:01
... 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. — andzep, Jul 29 '16 at 17:03
... 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? — andzep, Jul 29 '16 at 17:08
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. — andzep, Jul 29 '16 at 17:14

score 5 · Accepted Answer · answered Jul 29 '16 at 18:46

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:

Re-order the CommonsChunkPlugins so that the angular chunk was first.
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

Split vendor libraries into multiple chunks with webpack

1 Answers1