Angular2升级至8+webpack2升级至5后启动报错找不到NamedModulesPlugin

错误原因 #

Webpack v4版本开始已将NamedModulesPlugin内置为原生功能，Webpack v5+版本正式移除了webpack/lib/NamedModulesPlugin的独立导出，旧版本webpack配置中对该插件的引用逻辑在新版webpack环境下会触发模块找不到的报错。

修复步骤 #

1. 打开报错指向的配置文件 config/webpack.dev.js
2. 删除插件引入代码，通常为以下行：

const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin')

3. 删除plugins配置数组中的实例化代码：

new NamedModulesPlugin()

4. 若需要保留原NamedModulesPlugin的功能（开发环境下用模块路径而非数字id命名模块，便于调试），在webpack配置根节点添加以下配置即可：

module.exports = {
  // 其他原有配置保持不变
  optimization: {
    namedModules: true
  }
}

5. 保存配置后重新执行npm run start即可正常启动。

额外兼容提示 #

如果升级后还遇到其他webpack内置插件找不到的报错，可将旧版内置插件替换为新版对应配置项，例如原CommonsChunkPlugin需替换为optimization.splitChunks相关配置。

内容的提问来源于stack exchange，提问作者Usama Attique