如何让Webpack+Babel未压缩构建输出ES5兼容代码？原因及方案

Webpack 默认生成的 runtime 引导代码，在未开启压缩（optimization.minimize: false）时，会采用 ES6 语法（比如箭头函数）——因为它默认假设你的运行环境支持 ES6 特性。而当你开启压缩（optimization.minimize: true）时，默认的压缩工具 Terser 会自动把这些 runtime 代码也转译为 ES5 语法，所以最终输出符合要求。

另外，你配置的 Babel 通常只处理业务代码和你指定的模块，不会主动处理 Webpack 自身生成的 runtime 代码，这就是未压缩构建出现 ES6 语法的核心原因。

要让未压缩构建也输出纯 ES5 代码，只需在 Webpack 配置里添加 target: 'es5' 即可：

// webpack.config.js
module.exports = {
  // 其他配置项...
  target: 'es5',
  optimization: {
    minimize: false
  }
};

这个配置会直接告诉 Webpack 生成完全兼容 ES5 的 runtime 代码，无需依赖压缩工具做后续转译。

如果你的业务代码仍存在未转译的 ES6 语法，确保 Babel 配置正确覆盖所有需要处理的文件，比如在 babel.config.json 或 .babelrc 中配置合适的预设：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "ie": "11"
      }
    }]
  ]
}

这样就能同时保证业务代码和 Webpack 生成的代码都符合 ES5 标准。

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