运行yarn test:build编译React应用报NamedChunksPlugin非构造函数TypeError

安全阿岳

2026-8-29

报错根因

执行yarn test:build触发的[webpack-cli] TypeError: webpack.NamedChunksPlugin is not a constructor报错，核心是Webpack 5 已经移除了内置的NamedChunksPlugin构造函数，当前项目依赖中存在适配Webpack 4的旧版插件，仍在调用该已被删除的API，最终触发类型错误。

排查思路

先核对已安装的webpack生态依赖版本：当前项目使用webpack@^5.65.0，但配套的webpack-bundle-analyzer@^3.9.0、webpack-dev-server@^3.11.0均为Webpack 4适配版本，两个包的内部构建逻辑都会调用已被Webpack 5移除的NamedChunksPlugin，是本次报错的直接诱因。
可进入项目node_modules目录，全局搜索NamedChunksPlugin关键字，能直接定位到上述两个包内的调用代码，确认冲突来源。
若升级上述依赖后仍报错，需检查项目自定义webpack配置文件，排查是否存在手动编写new webpack.NamedChunksPlugin()的逻辑，这类直接调用在Webpack 5环境下也会触发相同报错。

修复方案

升级不兼容依赖到Webpack 5适配版本，在项目根目录执行以下命令：
```
yarn add -D webpack-bundle-analyzer@^4.5.0 webpack-dev-server@^4.7.0
```
注意：webpack-dev-server@4.x存在部分配置 Breaking Change，例如旧版的devServer.contentBase配置项已改为devServer.static，升级后需同步修改webpack配置中对应的旧字段，避免触发新的配置错误。
若自定义配置中存在直接实例化NamedChunksPlugin的代码，删除对应插件配置，改用Webpack 5官方提供的配置项实现相同效果：
```
module.exports = {
  // 其余原有webpack配置
  optimization: {
    chunkIds: 'named'
  }
}
```
该配置和旧版NamedChunksPlugin的运行效果完全一致。
依赖和配置修改完成后，删除项目下的node_modules目录与yarn.lock文件，重新执行yarn install安装干净依赖，再运行yarn test:build即可正常构建。