javascriptwebpackwebpack-4webpack-splitchunkscommonschunkplugin

How to upgrade Webpack 3 CommonsChunkPlugin config to Webpack 4 splitChunks while maintaining same behaviour for this case?


I'm trying to migrate from Webpack 3 to 4, and that requires me to change from using CommonsChunkPlugin to splitChunks. But I'm struggling to maintain the same behaviour.

My Webpack 3 code:

webpack.config.js

  entry: {
    vendor: ['jquery', 'timeago.js', 'jquery-accessible-autocomplete-list-aria/jquery-accessible-autocomplete-list-aria', 'jquery-ujs'],
    application: ['./javascripts/application.js', './stylesheets/application.scss'],
  },

and

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: Infinity,
    }),

I think Webpack call this Explicit Vendor Chunk.

What Webpack 4 code should I write to produce the same behaviour as above?

I tried removing

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: Infinity,
    }),

but it doesn't just work.

I tried following https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693 but it doesn't produce the same behaviour too.


Solution

  • In the end, I did this:

    webpack.config.js

      entry: {
        application: [
          './javascripts/application.js',
          './stylesheets/application.scss',
          'jquery',
          'timeago.js',
          'jquery-accessible-autocomplete-list-aria/jquery-accessible-autocomplete-list-aria',
          'jquery-ujs',
        ],
      },
    
      optimization: {
        splitChunks: {
          cacheGroups: {
            common: {
              test: /[\\/]node_modules[\\/]/,
              name: 'vendor',
              chunks: 'initial',
            },
          },
        },
      },
    

    and removed this:

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: Infinity,
    }),
    

    Basically, I stopped using CommonsChunkPlugin because it was deprecated during the webpack v3 to v4 upgrade and I switched to using splitChunks because that's the new way of code splitting in Webpack 4.

    In splitChunks config, I tell it to extract code from node_modules and put those code into vendor.js bundled file, so I end up with 2 bundled JS files: application.js and vendor.js.