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件を見るIT用語: SOLID原則とは｜オブジェクト指向設計の5つの基本原則
保守性の高いソフトウェア設計のためのSOLID原則（単一責任・開放閉鎖・リスコフ置換・インターフェース分離・依存性逆転）を解説。
Prettier（コードフォーマッター）
コードを自動的に整形するオピニオネイテッドなフォーマッター。JavaScript・TypeScript・CSS・HTML・JSON・Markdownに対応し、チームのコードスタイル論争を終わらせる。
IT用語: リファクタリングとは｜外から見た動作を変えずに内部を改善する
コードの外部動作を保ちながら内部構造を整理するリファクタリングの目的・手法・タイミングを解説。
TypeScript (TS)
JavaScriptの弱点（エラーの起きやすさ）を克服するためにMicrosoftが開発した、「型（ルール）」を持つ進化版言語。
Jest（ジェスト）
MetaがReact向けに開発したJavaScript/TypeScriptのテストフレームワーク。ゼロ設定で動作・スナップショットテスト・モック機能を標準搭載し、フロントエンドテストのデファクトスタンダード。
IT用語: async/awaitとは｜非同期処理をわかりやすく書く構文
Promiseベースの非同期処理をまるで同期処理のように書けるasync/awaitの仕組みとエラーハンドリングを解説。