本文へスキップ
MameTechNews
フロントエンド

Webpack 5.111公開、ESモジュール出力が実験フラグなしで安定化

## POINTS

  • experiments.outputModuleだけ残すと無効になるため、output.moduleの明示が必要になる
  • output.copyとCSSの自動ダウングレードで、別ツールとの処理重複を点検する必要がある
  • webpack 5系を続けるならESM出力へ寄せ、依存削減とランタイム縮小の効果を取る

webpackプロジェクトは9月14日、5.111を公開した。これまで実験扱いだったESモジュール出力が安定し、experiments.outputModuleを削除してoutput.moduleだけ残せばよい。古いフラグだけ残すと無視されるため、アップグレード時はoutput.module: trueを明示する必要がある。library.typeがmoduleまたはmodern-moduleならoutput.moduleは自動で有効になる。experiments.futureDefaultsを使うと、対象がモジュールを読める場合はESMが既定になる。

ライブラリ向けには、外部パッケージのexport *がネイティブ再エクスポートになり、後から差し替わる値も利用側へ伝わる。import属性も保持される。アプリ向けにはoutput.copyでpublic配下などをビルドに含められ、別途のコピー工程を減らせる。browserslist対象では、組み込みCSS圧縮がinsetやネスト、メディアクエリ範囲などを古い記法へ下げ、色のフォールバックも既定で付く。

チャンクローダの実行時コードは小さくなり、acornとneo-asyncへの依存も外れた。webpack 5系を維持するチームにとって、実験フラグ掃除とESM出力への移行、CSS互換処理の重複(PostCSSとの二重変換)確認が実務上の論点になる。ViteやTurbopackへ移る計画がある場合でも、残存webpackビルドの設定負債をこの機会に減らせる。