Webpack Split Application Code And Vendor Packages

September 16, 2017

webpack
npm

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 ad-free.

👶 Some of the Apps I built

Travelopy - travel discovery and journal
LuaPass - offline password manager
WhatIDoNow - a public log of things I am working on now

👨‍💻 Is your company hiring?

I am a full stack engineer (Python, Flask, JavaScript, Vue.js, Kotlin, Android) open to remote or relocation job opportunity. Check out my portfolio.

By Desmond Lua

A dream boy who enjoys programming and travelling, maker of Travelopy. Follow me on @d_luaz.

Tags: