1. Tutorials
  2. webpack

Webpack Split Application Code And Vendor Packages

September 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 ad-free.
👨‍💻 Looking for a job (ok with remote or relocation)
I am a full stack engineer (Python, Flask, JavaScript, Vue.js, Kotlin, Android), checkout my portfolio.
👶 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
By Desmond Lua
A dream boy who enjoys programming and travelling, maker of Travelopy. Follow me on @d_luaz.
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.