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

时间:2018-03-19 17:59:21

标签: migration webpack-3 commonschunkplugin webpack-4

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

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

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)

导致此问题的原因是什么?

我查看了change log on webpack github并发现CommonsChunkPlugin已被删除

但是当我查看webpack documentation时,我可以找到版本4.1.1的CommonsChunkPlugin

我的直觉是告诉我CommonsChunkPlugin已被弃用,我们应该使用optimization.splitChunks

有没有人遇到过这个问题并找到了从第3版迁移到4版的好教程?

1 个答案:

答案 0 :(得分:2)

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

在webpack 4中,此行为是使用webpack配置根目录中的"optimization"字段完成的。

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

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

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