UglifyJSの代わりに、terserを使ってwebpackする

terser始めました

最近、お遊びでドメイン取得したり、firebase触ったり、webpackしたりしているのですが、ES6で書いたJavaScriptを、webpack定番の圧縮ツールであるUglifyJSで圧縮すると、エラーが散見されるようになりました。
原因は、UglifyJSが、ES6+に対応していないって事でした^q^

ということで、UglifyJSの代わりに、terserとterser-webpack-pluginを使っています。

https://www.npmjs.com/package/terser
https://www.npmjs.com/package/terser-webpack-plugin

使い方は、今までのUglifyJSと同じように使えます。
基本的には、tereser-webpack-pluginを使う感じです。

terser-webpack-pluginの設定

webpac.prod.config.js

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
    optimization: {
        minimize: true,
        minimizer: [new TerserPlugin({
        terserOptions: {
          ecma: 6,
          compress: true,
          output: {
            comments: false,
            beautify: false
          }
        }
      })]
    }
};

こんな感じで設定してやれば、いい感じに圧縮してくれます。
便利。

終わりに

他の詳細が見たい場合は、teser-webpack-pluginのgithub見てください。