执行Webpack命令报错：HookWebpackError:webpack.WebpackError is not a constructor

错误本质 #

这个报错是webpack内部的类引用逻辑失效导致的，大概率和缓存污染、依赖包版本隐式冲突，或是插件与当前webpack版本不兼容有关——哪怕你没手动修改依赖版本，子依赖的悄悄更新也可能触发这个问题。

排查修复步骤 #

• 清理webpack缓存
  手动清除webpack的缓存目录，避免旧缓存干扰编译：

  # Linux/Mac
  rm -rf node_modules/.cache/webpack
  # Windows
  rmdir /s /q node_modules\.cache\webpack
  

  也可以临时在webpack-config.js里添加cache: false，编译成功后再改回原有配置。

• 重装依赖包
  锁文件损坏或子依赖更新都可能导致依赖环境异常，执行以下操作重置依赖：

  # 删除依赖目录和锁文件
  rm -rf node_modules package-lock.json yarn.lock
  # 重新安装
  npm install
  

• 检查webpack插件兼容性
  逐个核对项目中使用的webpack插件（比如html-webpack-plugin、mini-css-extract-plugin等），确认它们的版本是否适配当前webpack版本。比如webpack 5.x对WebpackError的构造方式有调整，旧插件可能不兼容。

• 回退组件代码定位问题
  既然只修改了React组件代码，先临时回退最近的组件修改，看错误是否消失。如果消失，再逐步恢复修改，找到触发报错的具体代码片段——比如是否意外引入了webpack相关模块，或是组件内的逻辑导致webpack编译时内部出错。

• 检查webpack配置的钩子逻辑
  确认webpack-config.js中自定义的插件或钩子函数，是否错误引用了webpack.WebpackError，比如：

  // 错误引用示例
  const { WebpackError } = require('webpack');
  // webpack 5+ 正确引用方式
  const WebpackError = require('webpack').WebpackError;
  

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