【webpack】(現時点で)ES2015 (ES6)のままminifyする方法

---

※この記事は2017年6月に書いた記事です。

【webpack】(2018年2月25日現時点で)ES2015 (ES6)のままminifyする方法を新しく書いたのでこちらを参照したほうが幸せになれると思います。
こちらの結論は、webpackv4.0.0使えということになります。

残念ながらwebpackv4.0.0には出来ないという方は、
【webpack】(2018年1月現時点で)ES2015 (ES6)のままminifyする方法も書いているので参照されると幸せになれると思います。
以下、記事の概要です。

今（2018年1月）はuglifyjs-webpack-pluginを個別にインストールして
（webpackからuglifyjs-webpack-pluginへの依存だとバージョン古いので）
uglifyOptions: {ecma: 6}等のオプションをつけるのがスマートな様子です。
https://www.npmjs.com/package/uglifyjs-webpack-plugin#uglifyoptions

---

初めにwebpack標準のminifyツール

webpackでminifyする場合、通常はwebpackの中のUglifyJsPluginを利用しますね。
(minifyにはAggressiveMergingPluginとかも使いますけど、今回は重要じゃないので詳しいことは端折ります)
ただしこの場合ES5でjavascriptを記述するか、ES5へのトランスパイルが必須になります。

webpack.config.js

const webpack = require("webpack");

module.exports = {
  // ・・・
  plugins: [
    new webpack.optimize.UglifyJsPlugin()
  ],
  // ・・・

  module: {
    loaders: [
      {
        // ・・・
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      }
    ]
  }
}

これは、webpack標準が依存しているuglify-jsというライブラリが、ES2015をサポートしていないため
ES5での記述か、トランスパイルが必須になっています。

uglify-jsのES2015サポート版uglify-es

最近（たぶん）、uglify-jsのES2015サポート版uglify-esというパッケージがリリースされました。

これを使えば、ES2015でのminifyができそうですが、現時点でwebpackの標準Pluginには無さそうです。

switch to uglify-es · Issue #33 · webpack-contrib/uglifyjs-webpack-plugin · GitHub

webpackのuglify-esプラグイン

たぶん公式じゃないと思うのですが、uglify-es-webpack-pluginというのがあるようです。
github
npm

これを利用すれば、ES2015のままES5トランスパイスせずminifyできるようです。

npm install

npm -D install uglify-es-webpack-plugin

webpack.config.jsの記述

webpack.config.js

const UglifyEsPlugin = require('uglify-es-webpack-plugin');

module.exports = {
  // ・・・
  plugins: [
    new UglifyEsPlugin(),
  ],
  // ・・・
}

---

で、webpack実行したら、ES2015のままminifyされたjsが生成されました。

細かい設定は動くかどうかすらわかりませんが、SourceMapを出すぐらいは出来そうな印象を受けました。

（ES2015でminifyしてもIEは動かないですけどね。）