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件を見るヘッドレスCMS
表示用フロントエンド（ヘッド）を持たず、コンテンツ管理とAPIによるデータ提供に特化したCMS。Next.js・Astro等の任意のフロントエンドと組み合わせてJAMstack構成を実現する。
JAMstack
JavaScript・APIs・Markupの頭文字をとったWebアーキテクチャ。ビルド時に静的HTMLを生成し、動的機能はAPIで補完することで高速・安全・スケーラブルなWebサイトを実現する。
Python (パイソン)
AI（人工知能）やデータ分析の分野で世界的に最も人気のあるプログラミング言語。
IT用語: リファクタリングとは｜外から見た動作を変えずに内部を改善する
コードの外部動作を保ちながら内部構造を整理するリファクタリングの目的・手法・タイミングを解説。
PHP
Webサイトの裏側（サーバー側）で動くシステムを作るために特化したプログラミング言語。WordPressのベースでもある。
Rust (ラスト)
「処理の速さ」と「メモリの安全性（バグの出にくさ）」を両立させた、世界で最もプログラマーに愛されている次世代言語。