Webpack

一言でいうと

JavaScriptや関連ファイルを1つ（または数個）のファイルにまとめ上げる、伝統的な定番バンドラーのこと。

詳しい意味

Webpack は、JavaScript・CSS・画像など多数のファイルを依存関係を解決しつつ1つ（または最適化単位）にまとめる「モジュールバンドラー」の代表格です。React や Vue のプロジェクトでブラウザに配信できる JS にまとめる時に長年標準的に使われてきました。柔軟性が高い反面、設定が複雑になりがちで、「webpack.config.js が長くなる」のはあるある。最近は Vite / esbuild / Turbopack といった高速な後継ツールが出てきており、新規プロジェクトはそちらを選ぶ傾向。既存大規模プロジェクトは依然として Webpack ベースが多く、移行が進行中です。

何に使うか

既存の Webpack プロジェクトの保守。複雑なビルド設定が必要なエンタープライズプロジェクト。長く使われているレガシーフロントエンド。

どんな時に出るか

「webpack の設定」「webpack で詰まる」「webpackからViteに移行」といった場面で登場します。

具体例

• 新規プロジェクトはVite、既存はWebpack のまま、で技術的負債を抱えないよう運用している。
• Webpack の設定が複雑になったので、Vite に移行する社内検証を進めている。

別名・略称

関連語

間違えやすい語

初心者向けメモ

本の「印刷工場」のようなものです。原稿（複数のJS / CSSファイル）と挿絵（画像）と装丁を、1冊の本（バンドルされた配信ファイル）にまとめあげる。設定が細かく効くので難しい本も作れるが、その分マニュアル（設定ファイル）が分厚くなりがち。

この説明に改善点はありますか？

提案は管理者が確認した後に反映されます