Webpackは2012年、ドイツのエンジニア Tobias Koppers が公開したJavaScriptモジュールバンドラです。「複数のJSファイル・CSS・画像・フォントなどの依存をグラフ化して、1つ（または数個）のバンドルにまとめる」という考え方で、シングルページアプリケーション（SPA）時代の標準ツールとして、長らくフロントエンド開発の中核を担ってきました。近年はViteなどの後発ツールに押されつつも、依然として大規模プロジェクトで使われ続けています。
この記事の目次
- Webpackが解決した問題
- Webpackの主な構成要素
- Webpackと競合ツールの構図
- Webpackの強み・弱み
- まとめ
Webpackが解決した問題
2010年代初頭、Webアプリの規模が大きくなる中で、JavaScriptを複数ファイルに分けて開発し、本番では一つにまとめてリリースする必要が出てきました。Webpackはこの「複数モジュールを依存グラフから1つに統合する」処理を、CSS、画像、フォントなど非JSアセットも含めて扱える点で画期的でした。
Loaderプラグインで TypeScript、JSX、Sass、PostCSS などを変換し、最終的にブラウザ向けJSにする、というパイプラインは現代のフロントエンドビルドの基本形をWebpackが定着させた、と言って差し支えありません。
Webpackの主な構成要素
Webpackの設定は webpack.config.js に書きます。Entry（どこから読むか）、Output（どこに出すか）、Loader（どう変換するか）、Plugin（追加機能）、Mode（開発/本番）の5つを押さえれば基本構成が組めます。
ただ実務では設定項目が膨大化しがちで、「Webpack設定が秘伝のタレ化」する問題は業界あるあるです。Create React App や Next.js などのフレームワークが裏でWebpackを抱え込み、設定を隠蔽するパターンが普及した背景にもこの複雑さがあります。
Webpackと競合ツールの構図
2020年以降、Vite・esbuild・SWC・Turbopack・Rspack など、Goやrustで書かれた高速ビルドツールが台頭。Webpackは「動くものは動く一方、起動と再ビルドが遅い」という弱点があり、新規プロジェクトではViteが選ばれることが増えています。
とはいえ既存の大規模Webpackプロジェクトは膨大に存在し、Loader・Pluginエコシステムの厚みでは依然最強。「新規はVite、既存はWebpack」と棲み分けが進みつつある状況です。
Webpackの強み・弱み
Webpackの強みは Module Federation（MF）と呼ばれるマイクロフロントエンド機能。「複数のWebアプリで実行時に共通モジュールを共有」というのはまだ後発ツールでは追従しきれておらず、大規模組織での採用理由になっています。
弱みは何といっても設定の複雑さと起動・ビルドの遅さ。個人開発・小規模新規ならViteから始めるのが2020年代後半の常識ですが、既存の Webpack プロジェクトを保守する仕事も多く、エンジニアとしては基本知識として押さえておくべきです。
まとめ
Webpackはモダンフロントエンド開発の礎を築いた歴史的ツールで、今もエコシステムの大半を支えています。新規ツールに役目を譲りつつあるとはいえ、しばらくはエンジニアの基礎教養として知識が必要な存在であり続けるでしょう。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント