使用CLI与Webpack构建的Aurelia项目升级后运行报错求助

这个错误我之前帮朋友排查过，本质就是升级后Webpack和Aurelia CLI的依赖版本没对齐导致的——Tapable是Webpack的核心依赖，不同版本里的钩子注册规则有Breaking Change，版本不匹配就会出现这种找不到钩子的报错。下面是具体的修复步骤：

1. 对齐Webpack相关依赖版本 #

先打开项目根目录的package.json，看看这几个关键依赖的版本：

• webpack
• @aurelia/webpack-plugin
• aurelia-cli

大概率是你升级Aurelia CLI后，它要求的Webpack版本和你项目里已装的Webpack版本不兼容。解决方法很直接：

• 先卸载当前的Webpack及相关插件：

  npm uninstall webpack webpack-cli @aurelia/webpack-plugin
  

• 然后安装和你当前Aurelia CLI配套的版本（如果是最新版Aurelia CLI，直接执行下面的命令就行，npm会自动安装兼容的版本）：

  npm install webpack webpack-cli @aurelia/webpack-plugin --save-dev
  

2. 清理缓存重新装依赖 #

有时候残留的缓存会搞事情，保险起见执行以下操作：

• 删除node_modules文件夹和package-lock.json（用yarn的话删yarn.lock）：

  rm -rf node_modules package-lock.json
  

• 重新安装所有依赖：

  npm install
  

3. 检查自定义Webpack配置（可选） #

如果你自己修改过webpack.config.js，手动加过Webpack插件，那要检查插件的钩子注册方式是否符合当前Webpack版本的要求：

• Webpack 4及以前可能用的是compiler.plugin('module', ...)
• Webpack 5+必须改成compiler.hooks.module.tap(...)

不过Aurelia CLI生成的默认配置一般不会有这个问题，除非你自己改过。

4. 重新启动项目 #

做完上面的步骤后，再运行：

au run --env dev --watch

应该就能正常启动了。

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