CODEWITHSUNDEEP
javascriptangularjsnode.jswebpackcommonschunkplugin
Nick
Nick

Reputation: 2969

Split vendor libraries into multiple chunks with webpack

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?

Upvotes: 8

Views: 5145

Answers (1)

Nick
Nick

Reputation: 2969

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

Upvotes: 5

Related Questions