[Webpack 2] Grouping vendor files with the Webpack CommonsChunkPlugin

Posted 2020-07-28 Answer1215

Often, you have dependencies which you rarely change. In these cases, you can leverage the CommonsChunkPlugin to automatically put these modules in a separate bundled file so they can be cached and loaded separately from the rest of your code (leveraging the browser cache much more effectively).

 

The libaraies like ‘lodash‘, ‘jquery‘ are required alomost all the projects and once download, rarly change any more. So it would be a good idea to spreate those common libaries into a common vendor file.

 

  entry: {
    app: ‘./js/app.js‘,
    vendor: [‘lodash‘, ‘jquery‘],
  },

So rename the entry, add ‘app‘ and ‘vendor‘ entries.

 

So the output file canbe named like ‘bundle.app.js‘ and ‘bundle.vendor.js‘:

  output: {
    filename: ‘bundle.[name].js‘,
    path: resolve(__dirname, ‘dist‘),
    pathinfo: true,
  },

 

We will use webpack build in CommonsChunkPlugin:

  plugins: [
    isTest ? undefined : new webpack.optimize.CommonsChunkPlugin({
      name: ‘vendor‘,
    }),
  ].filter(p => !!p),

 

Now we can include those two bundle files into index.html:

    <script src="/bundle.vendor.js"></script>
    <script src="/bundle.app.js"></script>