Webpack（ウェブパック）
JavaScriptアプリの依存関係を解析して複数のファイルを1つ（または少数）のバンドルにまとめるモジュールバンドラー。CSS・画像等も処理でき、フロントエンドビルドツールの長年の標準。
Webpackとは？
Webpackは、JavaScriptアプリケーションの依存関係を解析して、複数のファイルを1つ（または少数）のバンドルファイルにまとめるモジュールバンドラーです。2012年にリリースされ、長年フロントエンドビルドの標準として使われてきました。
なぜバンドルが必要か？
ブラウザは多数の小さなファイルを個別にリクエストすると遅くなります。Webpackが複数ファイルを1つにまとめることで：
- HTTPリクエスト数を削減
- モジュール間の依存関係を解決
- 最適化（圧縮・ツリーシェイキング）を適用
Webpackの主要概念
| 概念 | 説明 |
|---|---|
| Entry | バンドルの起点ファイル |
| Output | バンドル後のファイルの出力先 |
| Loader | JS以外のファイル（CSS・画像等）を変換するプラグイン |
| Plugin | より高度な変換・最適化処理 |
| Mode | development（開発）/ production（最適化あり）の切り替え |
ViteとWebpackの比較
| 項目 | Webpack | Vite |
|---|---|---|
| 開発サーバー起動 | バンドル後に起動（遅い） | ESMで即時起動（速い） |
| 設定 | 複雑・柔軟 | シンプル |
| エコシステム | 成熟・豊富 | 急速に拡大中 |
| 採用時期 | レガシープロジェクトに多い | 新規プロジェクトで主流 |
まとめ
WebpackはCreate React App・Next.js・Vue CLI等のフレームワークが内部で使用してきた歴史的なツールです。新規プロジェクトではViteが推奨されますが、Webpackの概念理解は既存プロジェクトの保守に不可欠です。
関連する用語 (プログラミング)
全33件を見るPrettier（コードフォーマッター）
コードを自動的に整形するオピニオネイテッドなフォーマッター。JavaScript・TypeScript・CSS・HTML・JSON・Markdownに対応し、チームのコードスタイル論争を終わらせる。
IT用語: デザインパターンとは｜GoFの23パターンと代表例
ソフトウェア設計でよく直面する問題への定番解決策「デザインパターン」の概念とシングルトン・ファクトリー等の代表パターンを解説。
PWA（プログレッシブウェブアプリ）
Service WorkerやWeb App Manifestを使い、Webアプリにネイティブアプリに近い体験を提供する技術。オフライン動作・ホーム画面への追加・プッシュ通知が実現できる。
JAMstack
JavaScript・APIs・Markupの頭文字をとったWebアーキテクチャ。ビルド時に静的HTMLを生成し、動的機能はAPIで補完することで高速・安全・スケーラブルなWebサイトを実現する。
IT用語: クロージャ（Closure）とは｜関数が変数を「覚える」仕組み
関数が定義された時点のスコープの変数を参照し続けるクロージャの仕組みとカウンターなどの実用例を解説。
ESLint
JavaScriptとTypeScriptのコードを静的解析し、潜在的なバグや規約違反を検出するリンター。プロジェクト全体で一貫したコードスタイルを強制し、コードレビューの負担を軽減する。