在webpack中，是否可以将相同的入口点输出到2个输出文件，一个通过babel编译到ES5，另一个使用ES6代码编译

Question

在webpack中，是否可以将相同的入口点输出到2个输出文件中，一个通过babel编译到ES5，而另一个通过babel编译到ES6？

现在，我有以下webpack配置：

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: {
        filename: '[name].min.js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'production',

    //https://webpack.js.org/configuration/devtool/
    devtool: 'source-map'

    plugins: [
        new CleanWebpackPlugin(['dist']),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        }),

        //https://webpack.js.org/plugins/extract-text-webpack-plugin/
        new ExtractTextPlugin('jplist.styles.css'),
    ],

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: { minimize: false }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                minimize: false,
                                plugins: (loader) => [
                                    require('postcss-import')({ root: loader.resourcePath }),
                                    require('postcss-cssnext')({warnForDuplicates: false}),
                                    require('postcss-nested')(),
                                    require('postcss-simple-vars')(),
                                    require('autoprefixer')(),
                                    require('postcss-prettify')(),
                                    //require('cssnano')({zindex: false})
                                ]
                            }
                        }
                    ]
                })
            }
        ]
    }
};

我想得到以下输出：

• output-es5.min.js-使用babel编译到ES5
• output-es6.min.js-ES6代码

可能吗？

谢谢

Answer 1

是的，您的文件可以导出配置数组，而不是导出对象。

// You can put shared config in a base config.
const baseConfig = {
   entry: './src/index.js', // not needed with webpack4 this is the default
   ...
};

// Using lodash merge here as it does a deep merge but up to you
const es5Config = merge({}, baseConfig, {
  output: { ... },
  loaders: { ...babel... },
  ...
});

const es6Config = merge({}, baseConfig, {
  output: { ... },
  ...
});

module.exports = [es5Config, es6Config];