Webpackとは
Webpackとは、JavaScript を中心としたファイル群を1つにまとめる（Bundleする）ためのビルドツール です。
- bundle（バンドル）＝「まとめる」という意味
- JavaScript だけでなく、Sass・CSS・画像（jpg / png）・React用のJSX なども対象
- 依存関係を解析し、最適な順序で1つ（または複数）にまとめて出力してくれる
Webアプリのファイルを効率よく整理・最適化するためのツール
基本設定
Webpackは webpack.config.js に設定を記載して動作させます。
主に設定する内容は以下の3つ：
| 設定項目 | 例・説明 |
|---|---|
| entry | どのディレクトリのどのファイルをバンドルの起点（スタート地点）にするか |
| output | どの場所に・どんなファイル名で書き出すか |
| module / loader |
.js, .tsx, .scss, .jpg などの各ファイルをどう処理するか |
| plugins | 圧縮・HTML生成・環境変数の注入など追加機能 |
イメージ例：
module.exports = {
entry: "./src/index.js",
output: { filename: "bundle.js", path: __dirname + "/dist" },
module: {
rules: [
{ test: /\.js$/, use: "babel-loader" },
{ test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] },
],
},
plugins: [],
};
Webpackのメリット
| メリット | 説明 |
|---|---|
| 複数ファイルを1つにまとめられる | パフォーマンス向上・読み込み高速化 |
| 依存関係を自動で解析 | import順や読み込み順を気にしなくてよい |
| 多くの拡張機能（Loader / Plugin）がある | Sass / React / TypeScript など対応可能 |
| ビルド時に最適化できる | 圧縮・難読化・キャッシュ対策など |
| 実務で広く採用（特に企業 & 大規模開発） | カスタマイズ性が高い |
Webpackのデメリット
| デメリット | 理由 |
|---|---|
| 設定が難しい | 柔軟なぶん設定項目が多く、初心者がつまずきやすい |
| 学習コストが高い | Loader / Plugin の理解が必須 |
| ビルド速度が遅くなりやすい | 大規模プロジェクトだと時間がかかる |
| 近年は代替ツールが登場 | Vite / esbuild / Parcel など高速ツールの普及 |
補足：Webpackは現在でも必要？
- 大規模・企業向けのプロジェクトでは依然人気
- 細かく設定してカスタマイズしたい場合に最適
- ただし、学習コストと速度の観点で
→ 初学者や個人開発では Vite が主流 になりつつある