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?

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?

• javascript
• angularjs
• node.js
• webpack
• monschunkplugin

Share Improve this question Follow asked Jul 22, 2016 at 20:15 NickNick 2,9671212 gold badges4141 silver badges5252 bronze badges 7

• 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 Commented Jul 29, 2016 at 16:36
• @andzep Does not work, tried that. No difference in sizes. – Nick Commented Jul 29, 2016 at 16:54
• 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 Commented Jul 29, 2016 at 16:54
• 1 ... ok, last idea... if you change the order of the CommonsChunkPlugin-blocks... does it change the file sizes?... maybe because the first optimized mon chunk has the 'app'-chunk, then the second one auto-includes the first one. – andzep Commented Jul 29, 2016 at 17:03
• 1 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 Commented Jul 29, 2016 at 17:14

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 5

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