Webpack Split Application Code And Vendor Packages

Sep 16, 2017

Edit 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 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.