升级webpack到最新版本后编译出现devtool配置不匹配错误如何解决

问题根因 #

你遇到的报错是webpack5升级后的两个配置不兼容问题导致的，npm的ELIFECYCLE错误只是webpack启动失败的连锁报错，只要修复webpack配置即可解决。

• 第一个问题：webpack5对devtool选项的校验规则做了破坏性更新，要求关键词必须严格按照eval- -> cheap- -> module的顺序排列，你当前配置的cheap-module-eval-source-map顺序不符合要求，无法通过校验。
• 第二个问题：你同时配置了devtool选项和SourceMapDevToolPlugin，二者功能重复，在webpack5中同时启用会引发冲突。

具体修复步骤 #

修改webpack.dev.conf.js文件，做两处调整：

1. 调整devtool的取值顺序，将原来的：

devtool: 'cheap-module-eval-source-map',

替换为符合webpack5规则的写法：

devtool: 'eval-cheap-module-source-map',

2. 删除plugins数组中重复的SourceMapDevToolPlugin配置，也就是删掉如下代码：

new webpack.SourceMapDevToolPlugin({
    filename: '[file].map'
})

修改完成后重新执行npm run dev即可正常启动。如果对source map的精度要求不同，也可以选择其他符合命名规则的devtool取值，比如eval-cheap-source-map、eval-source-map等，只要遵循官方要求的关键词顺序即可。

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