In webpack, is it possible to output the same entry point to 2 output files, one compiled to ES5 through babel and another with ES6 code

Question

In webpack, is it possible to output the same entry point to 2 output files, one compiled to ES5 through babel and another compiled to ES6 (without babel)?

For now I have the following webpack config:

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})
                                ]
                            }
                        }
                    ]
                })
            }
        ]
    }
};

I'd like to get the following output:

• output-es5.min.js - compiled with babel to ES5
• output-es6.min.js - ES6 code

Is it possible?

Thanks

Answer 1

Yes, instead of exporting an object, your file can export an array of configs.

// 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];