Webpack能否将同一入口输出为ES5（经Babel编译）和ES6两个文件？

当然可以实现同一个入口输出ES5和ES6两个产物的需求！下面给你两种实用的方案，你可以根据自己的场景选择：

这种方式在单个Webpack配置里完成，通过给同一个入口文件设置不同的输出名称，再用规则判断是否应用Babel编译。

修改后的配置示例：

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    'output-es5': './src/index.js',
    'output-es6': './src/index.js' // 同一个入口，对应两个输出产物
  },
  output: {
    filename: '[name].min.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        // 仅对output-es5入口的文件应用Babel转译
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
        include: path.resolve(__dirname, 'src'),
        issuer: {
          test: /output-es5/
        }
      },
      // 保留你原有的CSS处理规则
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new ExtractTextPlugin('[name].min.css'),
    // 只压缩ES5产物，ES6产物建议用TerserPlugin压缩（见方案2）
    new webpack.optimize.UglifyJsPlugin({
      include: /output-es5\.min\.js$/
    })
  ]
};

这里通过issuer.test匹配入口名称，只有output-es5对应的模块会经过Babel编译为ES5，output-es6则直接保留原始ES6语法。

把Webpack配置导出为一个数组，每个元素是独立的编译配置，分别处理ES5和ES6的输出，这种方式逻辑更清晰，便于后续扩展不同的产物规则。

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin'); // 支持ES6压缩的工具

// 提取公共配置，避免重复代码
const baseConfig = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('[name].min.css')
  ]
};

// ES5版本的专属配置
const es5Config = {
  ...baseConfig,
  output: {
    ...baseConfig.output,
    filename: 'output-es5.min.js'
  },
  module: {
    ...baseConfig.module,
    rules: [
      ...baseConfig.module.rules,
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader'] // 应用Babel转译ES5
      }
    ]
  },
  plugins: [
    ...baseConfig.plugins,
    new CleanWebpackPlugin(['dist']), // 仅在第一个配置执行清理，避免重复删除文件
    new webpack.optimize.UglifyJsPlugin() // Uglify仅支持ES5压缩
  ]
};

// ES6版本的专属配置
const es6Config = {
  ...baseConfig,
  output: {
    ...baseConfig.output,
    filename: 'output-es6.min.js'
  },
  optimization: {
    minimizer: [
      new TerserPlugin({ // Terser支持ES6语法压缩
        terserOptions: {
          ecma: 6
        }
      })
    ]
  }
};

// 导出两个编译配置
module.exports = [es5Config, es6Config];

一些关键注意事项 #

• Babel配置：确保你的.babelrc或babel-loader配置正确，比如使用@babel/preset-env预设来转译ES6+到ES5。
• 压缩工具选择：UglifyJsPlugin不支持ES6语法，所以ES6产物必须用TerserPlugin（Webpack 4及以上版本默认也使用Terser）。
• 清理插件：多编译实例下，CleanWebpackPlugin只需要在其中一个配置里添加，否则会重复清理目标目录。

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