I'm trying to migrate from Webpack 3 to 4, and that requires me to change from using CommonsChunkPlugin to splitChunks. But I'm struggling to maintain the same behaviour.
My Webpack 3 code:
webpack.config.js
entry: {
vendor: ['jquery', 'timeago.js', 'jquery-accessible-autocomplete-list-aria/jquery-accessible-autocomplete-list-aria', 'jquery-ujs'],
application: ['./javascripts/application.js', './stylesheets/application.scss'],
},
and
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity,
}),
I think Webpack call this Explicit Vendor Chunk.
What Webpack 4 code should I write to produce the same behaviour as above?
I tried removing
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity,
}),
but it doesn't just work.
I tried following https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693 but it doesn't produce the same behaviour too.
In the end, I did this:
webpack.config.js
entry: {
application: [
'./javascripts/application.js',
'./stylesheets/application.scss',
'jquery',
'timeago.js',
'jquery-accessible-autocomplete-list-aria/jquery-accessible-autocomplete-list-aria',
'jquery-ujs',
],
},
optimization: {
splitChunks: {
cacheGroups: {
common: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'initial',
},
},
},
},
and removed this:
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity,
}),
Basically, I stopped using CommonsChunkPlugin
because it was deprecated during the webpack v3 to v4 upgrade and I switched to using splitChunks
because that's the new way of code splitting in Webpack 4.
In splitChunks
config, I tell it to extract code from node_modules
and put those code into vendor.js
bundled file, so I end up with 2 bundled JS files: application.js
and vendor.js
.