UglifyjsWebpackPluginが非推奨になったので乗り換えた
Vue.js やらWebpackやらPWAを勉強するために小さいアプリケーションを作っていたのだが、それがいつの日からかリリース時のビルドのみ失敗するようになった。
TL;DR
修正したPull Requestはこちら。 github.com
何に乗り換えるか
そもそもUglifyjsWebpackPluginは、2ヶ月ほど前に非推奨(deprecated)になっているのを見つけた。 GitHub - webpack-contrib/uglifyjs-webpack-plugin: [deprecated] UglifyJS Plugin
それを継ぐ選択肢として、terserを用いたterser-webpack-pluginがある。 しかし、そもそも今作っているアプリではBabelを使っていたので、依存をなるべく減らすためにもbabel-preset-minifyに乗り換えることにした。
使い方
まずはUglifyjsWebpackPluginをアンインストールし、babel-preset-minifyをインストールする。
npm uninstall -D uglify-webpack-plugin npm install -D babel-preset-minify
次にWebpackの設定ファイルを以下のように変更する。
module: {
rules: [
{
include: [path.resolve(__dirname, "src")],
loader: "babel-loader",
options: {
plugins: ["syntax-dynamic-import"],
presets: [
+ "minify", # <= 追加
[
"@babel/preset-env",
{
modules: false
}
]
]
},
test: /\.js$/
},
単に、babel-loader
のオプションの1つであるoptions.presets
に"minify"
を追加するだけだ。
もし、babel-preset-minify
のオプションを指定したい場合、"minify"
の代わりに以下のようなオブジェクトを渡す。
[ "minify", { "removeConsole": { "exclude": ["error", "info"] } } ]
ちゃんとwebpack --mode=production
のときだけminifyしてくれるので、十分使えそう。