How to minify ES6 code using Webpack?

Question

I'm using webpack and want to deploy my site. If I minify and bundle my JavaScript code, I've got this error:

Parse error: Unexpected token: name (Button)

Here is my not bundled code:

'use strict';

export class Button { // <-- Error happens on this line
    constructor(translate, rotate, text, textscale = 1) {
        this.position = translate;
        this.rotation = rotate;
        this.text = text;
        this.textscale = textscale;
    }
}

Note in bundled code the keyword export is removed. In development, there are no errors thrown. Here you could find my configuration file of WebPack:

var webpack = require('webpack');

var PROD = true;

module.exports = {
    entry: "./js/entry.js",
    output: {
        path: __dirname,
        filename: PROD ? 'bundle.min.js' : 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            }
        ]
    },
    plugins: PROD ? [
        new webpack.optimize.UglifyJsPlugin({
            compress: { 
                warnings: false 
            },
            output: {
                comments: false,
            },
        })
    ] : []
};

If I change PROD to false, I've no error, if true I've got error from above. My question is can I enable ES6 in Webpack?

Answer 1

Not sure if you're still looking for an answer to this, but now you can include the beta version of uglifyjs-webpack-plugin as a webpack plugin and it'll use uglify-es which can minify ES6 code.

npm install uglifyjs-webpack-plugin

and then in your webpack.config.js:

const Uglify = require("uglifyjs-webpack-plugin");

module.exports = {
    entry: ...,
    output: ...,
    plugins: [
        new Uglify()
    ]
};

Answer 2

Having this default webpack config:

> npm list -g  uglifyjs-webpack-plugin
+-- 
| `-- webpack@3.10.0
|   `-- uglifyjs-webpack-plugin@0.4.6
`-- webpack@3.10.0
  `-- uglifyjs-webpack-plugin@0.4.6

the following worked for me with an esnext target:

npm i -D uglifyjs-webpack-plugin

yielding the now local uglifyjs-webpack-plugin:

 > npm list  uglifyjs-webpack-plugin
 `-- uglifyjs-webpack-plugin@1.2.2    

webpack.config.js

const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
...
plugins: [
    //new webpack.optimize.UglifyJsPlugin() @0.4.6 doesn't work
    new UglifyJSPlugin() // @1.2.2  works with esnext
]

See the related maintainer's posts:

• Is ES6+ supported or not?
• Rest parameters not recognized

Answer 3

Using the uglifyjs-webpack-plugin@1.2.2 solves my problem.

Also, in my webpack.config.js

    {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
            presets: [require.resolve('babel-preset-env')]
        }
    }

Answer 4

Just came to know that uglifyjs-webpack-plugin also doesn't minify ES6 code anymore. They started doing so in some versions, but then uglify-es they used is no more maintained so they fell back to uglify-js which doesn't support ES6 minification. Full Details here

If you want to minify ES6 code, please take a look at terser-webpack-plugin

terser is a fork of uglify-es that retains API and CLI compatibility with uglify-es and uglify-js@3.

Install the plugin with NPM via:

npm install terser-webpack-plugin --save-dev

or with yarn:

yarn add -D terser-webpack-plugin

Then, add the plugin in the in the optimization section of your webpack config:

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  //...
  optimization: {
    minimizer: [new TerserPlugin()]
  }
};