升级Webpack5后terser-webpack-plugin出现require依赖静态提取警告如何解决

算力阿峰

2026-10-6

问题根因

这个警告的本质是运行在Node.js环境的webpack构建插件terser-webpack-plugin被错误打包到了面向浏览器的前端产物中，该插件内部的动态require语法在浏览器环境下无法被webpack静态解析，因此抛出警告。

解决方案

按优先级依次尝试以下方法即可解决：

排查业务代码引用
检查你的src目录下的所有业务代码，确认没有手动import或require terser-webpack-plugin相关代码，该插件是webpack构建阶段使用的工具，不需要在前端业务逻辑中引入，如有引用直接删除即可。
配置externals排除该模块
如果确认业务代码没有手动引用，可在webpack配置中添加externals配置，明确告诉webpack不要将该模块打包到产物中：

module.exports = {
  // 其余原有配置保持不变
  externals: {
    'terser-webpack-plugin': 'commonjs terser-webpack-plugin'
  }
}

配置规则屏蔽指定警告
如果上述方法都不生效，且确认该警告不影响项目正常运行，可直接配置规则屏蔽该特定警告，避免干扰其他构建信息输出：

module.exports = {
  // 其余原有配置保持不变
  ignoreWarnings: [
    {
      module: /node_modules\/terser-webpack-plugin/,
      message: /Critical dependency: require function is used in a way in which dependencies cannot be statically extracted/
    }
  ]
}