Webpack 4迁移至5后webpack-closure-compiler插件兼容问题及替代方案咨询

方案1：使用兼容 Webpack 5 的 closure-webpack-plugin #

这是适配新版 Webpack 的 Closure Compiler 集成工具，替换旧插件步骤如下：

• 卸载旧插件：

  npm uninstall webpack-closure-compiler
  

• 安装新插件：

  npm install closure-webpack-plugin --save-dev
  

• 修改 Webpack 配置文件：

  const ClosurePlugin = require('closure-webpack-plugin');
  
  module.exports = {
    // 其他原有配置
    plugins: [
      new ClosurePlugin({
        mode: 'STANDARD', // 可选模式：STANDARD / AGGRESSIVE_BUNDLE / DEBUG
        closureCompiler: {
          compilation_level: 'ADVANCED',
          language_in: 'ECMASCRIPT_2020',
          language_out: 'ECMASCRIPT_2015',
          warning_level: 'QUIET'
          // 可添加其他Closure Compiler配置项
        }
      })
    ]
  };
  

  若项目无需依赖 Closure Library，可省略closureLibraryBase和deps配置。

方案2：直接用 google-closure-compiler 做独立编译步骤 #

跳过 Webpack 插件，将 Closure Compiler 作为打包后的单独处理环节：

• 安装核心编译器包：

  npm install google-closure-compiler --save-dev
  

• 在package.json的scripts中添加编译命令：

  {
    "scripts": {
      "build": "webpack --mode production",
      "postbuild": "google-closure-compiler --js dist/[你的主输出文件名].js --js_output_file dist/[最终压缩文件名].js --compilation_level ADVANCED"
    }
  }
  

  执行npm run build时，Webpack先完成打包，再由Closure Compiler处理最终输出文件。

方案3：通过 Babel 插件集成 Closure Compiler #

如果项目已使用 Babel，可在转译阶段直接应用 Closure Compiler 优化：

• 安装 Babel 插件：

  npm install @babel/plugin-transform-closure-compiler --save-dev
  

• 修改 Babel 配置文件（.babelrc或babel.config.js）：

  module.exports = {
    presets: ['@babel/preset-env', '@babel/preset-typescript'],
    plugins: [
      ['@babel/plugin-transform-closure-compiler', {
        compilationLevel: 'ADVANCED'
      }]
    ]
  };
  

注意：使用ADVANCED编译级别时，需遵循Closure Compiler代码规范，比如避免未声明的全局变量、正确处理模块导出导入，否则可能出现编译错误或运行时问题。

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