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

Question

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.

score 1 · Accepted Answer · answered Jun 26 '20 at 05:38

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.

and did you use htmlWebpackPlugin along with splitChunks? – DeWy Sady Jul 22 '20 at 11:44 — DeWy Sady, Jul 22 '20 at 11:44
@DeWySady No, I didn't use it – Henry Yang Jul 29 '20 at 07:17 — Henry Yang, Jul 29 '20 at 07:17

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

1 Answers1