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

空扰寡人 提交于 2019-12-10 18:31:18

问题


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 ?


回答1:


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
    }
}


来源:https://stackoverflow.com/questions/49369533/webpack-migration-3-4-error-cannot-find-module-webpack-lib-optimize-common

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!