Webpack v1升级至v3后出现Module not found报错如何解决

批量出现Module not found报错不是单个依赖丢失导致的，核心诱因有两个：

• 依赖版本生态完全不匹配：升级Webpack到v3时，没有同步对齐配套工具链的版本，当前安装的react-dev-utils、react-hot-loader、babel、polyfill类包要么是适配Webpack4/5的过高版本，要么是残留的适配Webpack1的过老版本，peer依赖关系完全断裂。比如报错里的core-js/actual是core-js@3的专属路径，Webpack3生态对应的是core-js@2版本；报错找不到babel是因为babel6之后已经不存在名为babel的npm包，拆分为了babel-core、babel-loader等独立包。你之前判断“依赖已安装、文件存在”没有问题，但跨大版本的包内部路径、导出逻辑都有变更，Webpack3无法识别高版本包的结构，自然报解析失败。
• 依赖缓存残留：升级依赖时没有清理旧的安装缓存，lock文件（package-lock.json/yarn.lock）锁定了旧版本依赖树，或者node_modules内混杂了不同版本的同名包，导致模块解析路径错乱。

• 彻底清理旧依赖残留：删除项目根目录下的node_modules文件夹，同时删除对应包管理器的lock文件，npm用户删package-lock.json，yarn用户删yarn.lock，避免旧版本锁干扰安装。
• 对齐Webpack3兼容的依赖版本：所有配套工具不要安装最新版，要锁定适配Webpack3的大版本：
  • react-dev-utils锁定5.x版本，6.x及以上版本仅适配Webpack4+，装错版本就会报一堆它内部依赖的ansi-html、sockjs-client之类的包找不到
  • react-hot-loader锁定3.x或4.x早期版本，高版本的/patch入口路径和旧版本不兼容
  • babel生态使用babel6版本：安装babel-core@6、babel-loader@7，babel-loader@8及以上仅支持Webpack4+
  • polyfill类包锁定兼容版本：安装core-js@2，搭配对应兼容版本的regenerator-runtime、whatwg-fetch、bluebird、object-assign，不要装core-js@3版本
  • ansi-html、html-entities、strip-ansi这类react-dev-utils的间接依赖不需要手动单独安装，装对react-dev-utils版本时会自动安装匹配的版本
• 修正Webpack配置规则：Webpack3不再支持省略loader后缀-loader的简写写法，配置里所有写babel的loader规则都要改成babel-loader，否则会触发找不到babel模块的报错。
• 重新安装依赖后启动：执行npm install（或你使用的包管理器对应的安装命令）完成依赖安装后，再运行node client/scripts/start.js启动服务即可。

避坑提示：不要看到报错缺某个包就单独执行npm install 包名安装，这种操作默认会装最新版的包，和Webpack3的兼容性更差，会导致更多解析报错。

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