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のルールを宣言します。

A minimal webpack.config.js

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要件を持つ大規模で確立されたアプリで依然として広く使われています。

重要なポイント

Webpackはimportグラフをたどってモジュールとアセットをバンドルします。
loaderはファイルを変換し、pluginはbuild全体をカスタマイズします。
本番のバンドルはCPU負荷が高く、永続的なcacheがCIのrebuildを高速化します。