【webpack】(2018年1月現時点で)ES2015 (ES6)のままminifyする方法
※この記事は2018年1月に書いた記事です。
【webpack】(2018年2月25日現時点で)ES2015 (ES6)のままminifyする方法を新しく書いたのでこちらを参照したほうが幸せになれると思います。
こちらの結論は、webpackv4.0.0
使えということになります。
残念ながらwebpackv4.0.0
には出来ないという方はこの記事を読み進めてください。
去年も【webpack】(現時点で)ES2015 (ES6)のままminifyする方法という記事を書きましたが、
最近はまた違う方法で出来るので記事を書きます。
(前回よりは公式っぽいツールを使います。)
初めにwebpack標準のminifyツール
前回記事にもう少し詳細を書きましたが、
webpackでminifyする場合、通常はwebpackの中のwebpack.optimize.UglifyJsPlugin
を利用しますね。
ただしこの場合ES5でjavascriptを記述するか、ES5へのトランスパイルが必須になります。
(現在webpackはv3.10.0
)
uglifyjs-webpack-plugin
uglifyjs-webpack-pluginはwebpackのwebpack.optimize.UglifyJsPlugin
の実態です。
リンク先のドキュメント見ると、ES6に対応している風です。
早速試してみました。
uglifyjs-webpack-pluginのインストール
webpack v3.10.0
の依存関係にあるuglifyjs-webpack-pluginはv0.4.6
と古い様子なので、個別にインストールします。
npm i -D uglifyjs-webpack-plugin
私がインストールしたときのバージョンはv1.1.6
でした。
webpack.optimize.UglifyJsPlugin
にES6のOptionをつけてみる(失敗)
https://www.npmjs.com/package/uglifyjs-webpack-plugin#uglifyoptions
にあるようにuglifyOptions: {ecma: 6}
とOptionをつけてみます。
module.exports = {
// ・・・
plugins: [
new webpack.optimize.UglifyJsPlugin({uglifyOptions: {ecma: 6}}),
],
// ・・・
}
としてみました。ただしこれだと失敗します。
webpack v3.10.0
の依存関係にあるuglifyjs-webpack-pluginはv0.4.6
と古いので
このコードではv0.4.6
のuglifyjs-webpack-pluginが呼ばれていました。
uglifyjs-webpack-pluginにES6のOptionをつけてみる(成功)
以下のように変更します。
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
// ・・・
plugins: [
new UglifyJsPlugin({uglifyOptions: {ecma: 6}}),
],
// ・・・
}
めでたく、ES2015 (ES6)のままminifyできましたー
Author And Source
この問題について(【webpack】(2018年1月現時点で)ES2015 (ES6)のままminifyする方法), 我々は、より多くの情報をここで見つけました https://qiita.com/ota-meshi/items/9e9bfcbfab00e109494f著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .