Webpack migration 3 -> 4: Error: Cannot find module 'webpack/lib/optimize/CommonsChunkPlugin'

Question

I'm trying to migrate from webpack 3 to webpack 4.

The issue I have is with CommonsChunkPlugin, when I try to run webpack (npm run webpack-dev-server -- --config config/webpack.dev.js), I have the following error:

module.js:529
    throw err;
    ^

Error: Cannot find module 'webpack/lib/optimize/CommonsChunkPlugin'
    at Function.Module._resolveFilename (module.js:527:15)
    at Function.Module._load (module.js:476:23)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/antoinepissot/DEV/Reports/config/webpack.common.js:17:28)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)

What is causing this issue ?

I looked at the change log on webpack github and found that CommonsChunkPlugin has been removed

But when I look at the webpack documentation, I can find CommonsChunkPlugin for version 4.1.1

My gut feeling is telling me that CommonsChunkPlugin is deprecated and we should use optimization.splitChunks.

Did anyone experienced the issue and found a good tutorial to migrate from version 3 to 4 ?

`CommonsChunkPlugin` was removed -> `optimization.splitChunks`, `optimization.runtimeChunk`. You can find detailed information [how to migrate chunk plugin here](https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693) — vardius, Mar 19 '18 at 21:50
Possible duplicate of [Webpack 4 migration CommonsChunks](https://stackoverflow.com/questions/49017682/webpack-4-migration-commonschunks) — Legends, Mar 20 '18 at 16:08

score 3 · Accepted Answer · answered Jul 30 '18 at 10:35

As Vardius pointed out in his comment, CommonsChunkPlugin was removed.

In webpack 4, this behaviour is done using "optimization" field at the root of webpack config.

For instance, this is how my webpack.config.js looks like now:

module.exports = function () {
   return {
    resolve: ...
    module: ...
    plugins: ...
    optimization: {

       namedModules: true, // old NamedModulesPlugin()
       splitChunks: {      // old CommonsChunkPlugin
          chunks: "all"
       },
       runtimeChunk: true,
       concatenateModules: true // old ModuleConcatenationPlugin
    }
}

Webpack migration 3 -> 4: Error: Cannot find module 'webpack/lib/optimize/CommonsChunkPlugin'

1 Answers1

Linked