Webpackとは何か - JavaScriptのモジュールバンドラーを解説
Webpackはモジュールバンドラーです。JavaScript、CSS、アセットを受け取り、importグラフをたどって、ブラウザが読み込める最適化されたファイルにまとめ上げます。
Webpackは、モダンなフロントエンドのbuildを可能にしたバンドラーであり、散在するモジュールやアセットをわずかな数の最適化されたbundleに変えました。loaderとpluginを通じて高度に設定可能であり、それが強みであると同時に、複雑だという評判の源でもあります。
Webpackとは
WebpackはJavaScriptアプリケーション向けの静的モジュールバンドラーです。1つ以上のエントリポイントから始めて、importをたどることで依存関係グラフを構築し、その後bundleを出力します。あらゆるもの（JS、CSS、画像、フォント）を、変換して取り込めるモジュールとして扱います。
loaderとplugin
loaderは、グラフに追加される個々のファイルを変換します。たとえばTypeScriptのコンパイルや画像のインライン化などです。pluginはより広範なbuildにフックして、CSSの抽出、HTMLの注入、bundleの分割といったことを行います。このloaderとpluginのパイプラインこそが、Webpackにほぼあらゆるアセットタイプを扱わせるものです。
config例
最小限のconfigは、entry、output、そしてloaderのルールを宣言します。
module.exports = {
entry: "./src/index.js",
output: { filename: "bundle.js" },
module: {
rules: [{ test: /\.css$/, use: ["style-loader", "css-loader"] }]
}
};CI/CDでの役割
CIでは、Webpackはデプロイされる本番bundleを生成し、通常は「build」スクリプト経由で行われます。minificationとcode splittingを伴う本番buildはCPU集約的であり、pipelineの遅いステップになり得ます。Webpackの永続的なファイルシステムcacheを実行間で使うことでrebuild時間を削減でき、これらの重めのbuildは、ウォームなcacheを備えたマネージドrunner上でより速く完了します。
代替手段
Vite（esbuildとRollupの上に構築）ははるかに高速な開発体験を提供し、今や新規プロジェクトの一般的なデフォルトとなっています。esbuildとRollupはより高速で軽量なバンドラーであり、SWCは変換ステップを高速化します。Webpackは、複雑なカスタムbuild要件を持つ大規模で確立されたアプリで依然として広く使われています。
Applying this to your pipeline
- Measure before changing. Most CI optimisation targets the wrong step because the slow one is assumed rather than timed.
- Cache what is expensive to produce and cheap to validate, and key the cache to the exact tool version.
- Fail fast: run the cheapest checks that can reject a change first, so an expensive job never starts on code that cannot pass.
- Prefer determinism over speed when they conflict. A fast pipeline nobody trusts gets re-run, which is slower than a slow one that is believed.
重要なポイント
- Webpackはimportグラフをたどってモジュールとアセットをバンドルします。
- loaderはファイルを変換し、pluginはbuild全体をカスタマイズします。
- 本番のバンドルはCPU負荷が高く、永続的なcacheがCIのrebuildを高速化します。