添加target: 'es5'到webpack.config.js出现错误的原因及解决方法

错误原因 #

当你设置target: "es5"时，Webpack无法自动确定合适的代码块（chunk）输出格式。es5只是一个JavaScript语法标准，并非具体的运行环境标识——Webpack默认的两种chunk格式都依赖特定环境的全局API：

• JSONP格式需要浏览器环境的document对象支持
• CommonJS格式需要Node.js环境的require函数支持

由于es5没有明确指向任何具体运行环境，Webpack无法自动选择适配的chunk格式，因此抛出该错误。

解决方案 #

方法1：明确具体运行环境（推荐） #

将target配置为对应实际运行环境的标识，而非单纯的语法标准。如果你是开发浏览器端应用，直接使用Webpack默认的"web"目标，再通过Babel完成ES5转译即可：

修改webpack.config.js：

module.exports = {
  // 替换target: "es5"为具体环境
  target: "web",
  // 其他原有配置...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: "babel-loader"
      }
    ]
  }
};

你的babel.config.js已经配置了@babel/preset-env，它会自动根据目标环境将ES6+代码转译为ES5，既保证兼容性，又让Webpack能正常使用默认的JSONP chunk格式。

方法2：手动指定chunkFormat（仅特殊场景使用） #

如果必须保留target: "es5"，需在output配置中手动指定chunkFormat，根据你的运行环境选择：

• 浏览器环境选"jsonp"
• Node.js环境选"commonjs"

修改webpack.config.js：

module.exports = {
  target: "es5",
  output: {
    // 根据实际环境选择
    chunkFormat: "jsonp", // 浏览器端使用
    // 或 chunkFormat: "commonjs" // Node.js端使用
    // 其他output配置...
  },
  // 其他原有配置...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: "babel-loader"
      }
    ]
  }
};

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