Webpack迁移3-> 4:错误:找不到模块'webpack/lib/optimize/CommonsChunkPlugin'

问题描述

我正在尝试从webpack 3迁移到webpack 4.

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

我遇到的问题是CommonsChunkPlugin，当我尝试运行webpack(npm run webpack-dev-server -- --config config/webpack.dev.js)时，出现以下错误:

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)

是什么原因导致此问题?

我查看了 webpack github上的更改日志，发现CommonsChunkPlugin已被删除

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

但是当我查看 webpack文档时，我可以找到版本4.1.1的CommonsChunkPlugin

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

我的直觉告诉我CommonsChunkPlugin已过时，我们应该使用optimization.splitChunks.

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

有人遇到过这个问题，找到了一个很好的教程，可以从版本3迁移到版本4吗?

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

推荐答案

正如Vardius在其评论中指出的那样，CommonsChunkPlugin已被删除.

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

在webpack 4中，使用根目录下的优化" 字段来完成此操作Webpack配置.

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

例如，这就是我的webpack.config.js的样子:

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迁移3-> 4:错误:找不到模块'webpack/lib/optimize/CommonsChunkPlugin'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！