概要

記事一覧はこちらです。

Spring Boot + npm + Geb で入力フォームを作ってテストする ( その９６ )( postcss を 7.0.29 → 8.3.8 へ、postcss-cli を 7.1.1 → 9.0.1 へ、prettier を 2.0.5 → 2.4.1 へ、stylelint を 13.3.3 → 13.13.1 へバージョンアップする ) の続きです。

今回の手順で確認できるのは以下の内容です。
- webpack を 4.43.0 → 5.56.0 へ、webpack-cli を 3.3.11 → 4.8.0 へバージョンアップします。

参照したサイト・書籍

To v5 from v4
https://webpack.js.org/migrate/5/
TerserWebpackPlugin
https://webpack.js.org/plugins/terser-webpack-plugin/
webpack-contrib / terser-webpack-plugin
https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
terser / terser
https://github.com/terser/terser
webpack@5の主な変更点まとめ
https://blog.hiroppy.me/entry/webpack5
webpack 5 にアップグレードしました
https://medium.com/studist-dev/migration-webpack-from-4-to-5-3df31da8e7a2
browserslist / browserslist
https://github.com/browserslist/browserslist
Cache
https://webpack.js.org/configuration/cache/#cachebuilddependencies

webpack を 4.43.0 → 4.46.0 へ、webpack-cli を 3.3.11 → 4.8.0 へバージョンアップする
webpack を 4.46.0 → 5.56.0 へバージョンアップする
uglifyjs-webpack-plugin を terser-webpack-plugin に変更する
package.json に browserslist を追加する
cache の設定を追加する
最後に各種コマンドや build で問題がないか確認する

手順

webpack を 4.43.0 → 4.46.0 へ、webpack-cli を 3.3.11 → 4.8.0 へバージョンアップする

To v5 from v4 の Upgrade webpack 4 and its plugins/loaders に webpack 4、webpack-cli を最新バージョンに上げるよう記述されているので、以下のコマンドを実行します。

npm install --save-dev webpack@4.46.0
npm install --save-dev webpack-cli@4.8.0

webpack を 4.46.0 → 5.56.0 へバージョンアップする

Make sure your build has no errors or warnings に記載されている node --trace-deprecation node_modules/webpack/bin/webpack.js を実行します。

mode は起動時オプションで指定するようにしているので、まずは node --trace-deprecation node_modules/webpack/bin/webpack.js --mode production を実行してみると特に警告やエラーのメッセージは出力されませんでした。

f:id:ksby:20211005070126p:plain

次に node --trace-deprecation node_modules/webpack/bin/webpack.js --mode development を実行してみますが、こちらもメッセージは何も出力されませんでした。

f:id:ksby:20211005070328p:plain

Test webpack 5 compatibility に記載されているオプションを webpack.config.js に追加してから、

module.exports = (env, argv) => {
  return {
    node: {
      Buffer: false,
      process: false,
    },
    entry: {
      "js/inquiry/input01": ["./src/main/assets/js/inquiry/input01.js"],
      ..........

node --trace-deprecation node_modules/webpack/bin/webpack.js --mode production コマンドを実行してみましたが、メッセージ等は表示されませんでした。webpack.config.js に追加したオプションは削除します。

f:id:ksby:20211005070813p:plain

問題ないようなので、以下のコマンドを実行し webpack を 5 の最新バージョンにバージョンアップします。

npm install --save-dev webpack@5.56.0

f:id:ksby:20211005071338p:plain

使用していない prettier-webpack-plugin に関するメッセージが出力されているので、以下のコマンドを実行して削除します。

npm uninstall --save-dev prettier-webpack-plugin

uglifyjs-webpack-plugin は後で削除するので、今はこのままにします。

npm run build コマンドを実行すると webpack 5 に対応していない uglifyjs-webpack-plugin の設定を残している影響でエラーメッセージが大量に出力されます。

f:id:ksby:20211005071817p:plain f:id:ksby:20211005071857p:plain

uglifyjs-webpack-plugin を terser-webpack-plugin に変更する

以下のコマンドを実行して uglifyjs-webpack-plugin をアンインストール、terser-webpack-plugin をインストールします。

npm uninstall --save-dev uglifyjs-webpack-plugin
npm install --save-dev terser-webpack-plugin@5.2.4

terser-webpack-plugin は uglifyjs-webpack-plugin とほぼ同じオプションが指定できるそうなので webpack.config.js の optimization を以下の内容に変更します。

const webpack = require("webpack");
const TerserPlugin = require("terser-webpack-plugin");

// --mode オプションで指定された文字列を参照したい場合には argv.mode を参照する
module.exports = (env, argv) => {
  return {
    ..........
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            ecma: 5,
            output: {
              comments: false,
            },
            compress: {
              dead_code: true,
              drop_console: true,
            },
          },
        }),
      ],
    },
    ..........
    devtool: argv.mode === "production" ? false : "inline-source-map",
  };
};

const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); → const TerserPlugin = require("terser-webpack-plugin"); に変更します。
new UglifyJsPlugin({ → new TerserPlugin({ に変更します。
uglifyOptions: { → terserOptions: { に変更します。
compress オプションの指定が compress: true と compress: { ... } の２つ書かれていたことに気づいたので、compress: true の方を削除します。
source map を生成するか否かは devtools の設定に依存するようになったので、sourceMap: false を削除します。
production モードの場合には source map を生成しないよう devtool: "inline-source-map" → devtool: argv.mode === "production" ? false : "inline-source-map", に変更します。

‘npm run build‘ コマンドを実行するとエラーメッセージは出なくなりました。

f:id:ksby:20211007003054p:plain

生成された js ファイルを見ると、～.LICENSE.txt というファイルも生成されるようになりました。

f:id:ksby:20211008051553p:plain

package.json に browserslist を追加する

Need to support an older browser like IE 11? を読むと package.json に browserslist を記述しておくと webpack 5 がコードスタイルを決めてくれるようになったそうです。https://github.com/postcss/autoprefixer を見ると autoprefixer も browserslist の設定を見てくれるようなので、package.json の最後に "browserslist": [ ... ] を追加します。

  ..........
  "browserslist": [
    "last 1 version",
    "> 1%",
    "IE 11"
  ]
}

postcss.config.js も以下のように変更します。

module.exports = {
  plugins: [
    require("stylelint"),
    require("autoprefixer"),
    require("cssnano")({
      preset: "default",
    }),
  ],
};

require("autoprefixer")({ browserlist: ["last 2 versions"] }), → require("autoprefixer"), に変更します。

browserslist を追加する前は npx browserslist コマンドを実行すると以下のように出力されますが、

f:id:ksby:20211007082905p:plain

追加した後は以下のよう変わりました。

f:id:ksby:20211007083052p:plain

cache の設定を追加する

webpack 5 からファイルシステムによるキャッシュが導入されて大幅に速度改善できるようになったとのことなので、設定を追加します。

webpack.config.js に cache を追加します。development 環境では有効、production 環境では無効にします。

    output: {
      ..........
    },
    cache:
      argv.mode === "production"
        ? false
        : {
            type: "filesystem",
            buildDependencies: {
              config: [__filename],
            },
          },
    resolve: {
      ..........