CODEWITHSUNDEEP
webpackecmascript-6ecmascript-5
Socrates
Socrates

Reputation: 9604

Webpack output to es5 / es6?

Is it possible have webpack output multiple ECMAScript versions?

Something like:

EDIT:

What I mean, is wether Webpack can create both variants in one single run.

Upvotes: 2

Views: 1971

Answers (1)

Antony Chane-Hive
Antony Chane-Hive

Reputation: 106

In one pass, I'm not sure you can do it with webpack. But you can export multiple targets using an array of configurations.

If you use babel 7, you can do something like this (untested):

module.exports = [
  {
    output: {
      filename: './dist-bundle-es5.js'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              presets: [
                [
                  '@babel/preset-env',
                  {
                    forceAllTransforms: true
                  }
                ]
              ]
            }
          }
        }
      ]
    },
    name: 'es5',
    entry: './app.js'
  },
  {
    output: {
      filename: './dist-bundle-es6.js'
    },
    name: 'es6',
    entry: './app.js'
  }
];

Check: https://webpack.js.org/configuration/configuration-types/#exporting-multiple-configurations

Edit: add example

Upvotes: 4

Related Questions