Webpack Split Application Code And Vendor Packages
September 16, 2017Edit webpack config file (e.g. webpack.config.js). It will generate a separate vendor.js files for vendor packages in node_modules directory.
Note: the following code is based on the work of vuejs-templates/webpack
var webpack = require('webpack')
module.exports = {
...
plugins: [
...
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.js',
minChunks: function (module, count) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
],
...
};
If you are extracting CSS with ExtractTextPlugin and want to generate vendor.css as well, you should replace /\.js$/ with /\.(js|css|sass|scss|less)$/ for the above configuration.
❤️ Is this article helpful?
Buy me a coffee☕ or support my work via PayPal to keep this space ad-free.
Apps I built 😉
✈️ Travelopy - places discovery and travel journal🔒 LuaPass - offline password manager
✔️ WhatIDoNow - a public log of things you are working on now
By Desmond Lua