satoryuの日記

忘れっぽいから覚えてるうちに書いておかないと。

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してくれるので、十分使えそう。

参考