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