How to minify ES6 code using Webpack?
WebpackEcmascript 6MinifyWebpack Problem Overview
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?
Webpack Solutions
Solution 1 - Webpack
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()
]
};
Solution 2 - Webpack
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()]
}
};
Solution 3 - Webpack
Having this default webpack config:
> npm list -g uglifyjs-webpack-plugin
+--
| `-- [email protected]
| `-- [email protected]
`-- [email protected]
`-- [email protected]
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:
Solution 4 - Webpack
Using the [email protected] solves my problem.
Also, in my webpack.config.js
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: [require.resolve('babel-preset-env')]
}
}