Webpack能否输出ES5/ES6代码？单次构建可生成多版本ECMAScript产物吗？

一、Webpack是否支持输出ES5或ES6代码？ #

Webpack本身只是一个模块打包工具，核心职责是合并模块，但不直接做语法转译。不过搭配Babel这类转译工具后，完全可以精准控制输出代码的ES版本：

• 输出ES5代码：借助babel-loader和@babel/preset-env，配置目标环境为支持ES5的浏览器，Babel会自动把ES6+语法转译为ES5兼容代码。
• 输出ES6代码：调整Babel配置，让它保留ES6及以上特性（比如箭头函数、let/const、ES模块语法），针对原生支持ES模块的现代浏览器做优化。

二、能否在单次构建中同时输出多个ES版本的产物？ #

当然可以！Webpack支持多编译器模式，只需把配置文件导出为一个数组，每个数组元素对应一个版本的构建配置，Webpack就会在单次构建流程中同时执行多个编译任务，生成不同版本的bundle。

具体配置示例 #

首先安装必要依赖：

npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env --save-dev

然后编写webpack.config.js：

const path = require('path');

// 抽离公共配置，避免重复代码
const baseConfig = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      }
    ]
  }
};

// ES5版本的构建配置
const es5BuildConfig = {
  ...baseConfig,
  output: {
    filename: 'bundle5.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    ...baseConfig.module,
    rules: [
      {
        ...baseConfig.module.rules[0],
        options: {
          presets: [
            ['@babel/preset-env', {
              targets: {
                browsers: ['> 0.25%', 'not dead'], // 覆盖绝大多数支持ES5的浏览器
                esmodules: false
              }
            }]
          ]
        }
      }
    ]
  }
};

// ES6版本的构建配置
const es6BuildConfig = {
  ...baseConfig,
  output: {
    filename: 'bundle6.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    ...baseConfig.module,
    rules: [
      {
        ...baseConfig.module.rules[0],
        options: {
          presets: [
            ['@babel/preset-env', {
              targets: {
                esmodules: true // 针对原生支持ES模块的现代浏览器
              },
              modules: false // 保留ES6模块语法，不转译为CommonJS
            }]
          ]
        }
      }
    ]
  }
};

// 导出配置数组，Webpack会同时执行两个构建任务
module.exports = [es5BuildConfig, es6BuildConfig];

配置说明 #

• 公共配置baseConfig抽离了入口、基础loader规则等重复内容，通过对象扩展运算符复用，减少冗余代码。
• 两个配置分别指定了不同的输出文件名和Babel预设：
  • ES5配置通过targets.browsers指定兼容范围，Babel会把所有ES6+语法转译为ES5。
  • ES6配置通过targets.esmodules针对现代浏览器，保留ES6特性和模块语法，生成更轻量化的bundle。

运行npx webpack后，就能在dist目录下同时得到bundle5.js和bundle6.js了。

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