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件を見るJest（ジェスト）
MetaがReact向けに開発したJavaScript/TypeScriptのテストフレームワーク。ゼロ設定で動作・スナップショットテスト・モック機能を標準搭載し、フロントエンドテストのデファクトスタンダード。
ESLint
JavaScriptとTypeScriptのコードを静的解析し、潜在的なバグや規約違反を検出するリンター。プロジェクト全体で一貫したコードスタイルを強制し、コードレビューの負担を軽減する。
Go / Golang (ゴー言語)
Google社が開発した、処理速度が超絶爆速で、大量のアクセスに強い現代的なプログラミング言語。
JavaScript (JS)
Webブラウザ上で動きのある表現（アニメーション等）を実現するためのプログラミング言語。
SPA（シングルページアプリケーション）
ページ遷移時にブラウザをリロードせず、JavaScriptで動的にコンテンツを更新するWebアプリのアーキテクチャ。React・Vue・Angularで実装されることが多い。
Python (パイソン)
AI（人工知能）やデータ分析の分野で世界的に最も人気のあるプログラミング言語。