フロントエンド - ビルド・ツール

webpack うぇぶぱっく

モジュールバンドラーJavaScriptバンドルローダープラグインビルドツール

webpackについて教えて

簡単に言うとこんな感じ！

バラバラに作ったJavaScriptのファイルや画像・CSSをまとめて「1つのパッケージ」に梱包してくれる引越し業者みたいなやつだよ！ブラウザに渡す前に荷物を整理・圧縮してくれるから、Webサイトが速く動くようになるんだ！

webpackとは

webpackは、モジュールバンドラー（Module Bundler）と呼ばれるツールのひとつです。現代のWebアプリ開発では、JavaScriptのコードを機能ごとに小さなファイル（モジュール）に分けて書くのが一般的ですが、そのままブラウザに渡すと何十・何百ものファイルをそれぞれ読み込む必要があり、パフォーマンスが悪化します。webpackはこれらのファイルを解析し、依存関係を解決しながら1つ（または少数）のファイルにまとめ（バンドルし）てくれます。

JavaScriptだけでなく、CSS・画像・フォントなどあらゆる種類のファイルをモジュールとして扱えるのがwebpackの最大の特徴です。import文を辿って依存関係のグラフを構築し、最終的にブラウザが読み込める形式に変換・出力します。React・Vue・Angularなど主要なフロントエンドフレームワークのプロジェクトで長年デファクトスタンダード（事実上の標準）として使われてきました。

webpackの核心：バンドルの仕組み

webpackはエントリーポイント（起点となるファイル）から始めて、importやrequireを辿りながら依存グラフを構築し、最終的にバンドル（束）として出力します。

概念	役割	例
Entry（エントリー）	バンドルの起点となるファイル	`src/index.js`
Output（アウトプット）	バンドルの出力先・ファイル名	`dist/bundle.js`
Loader（ローダー）	JS以外のファイルを変換する処理	`css-loader`, `babel-loader`
Plugin（プラグイン）	バンドル全体に対して処理を行う拡張	`HtmlWebpackPlugin`
Mode（モード）	開発用・本番用の最適化切り替え	`development` / `production`

ローダーとプラグインの違いの覚え方

Loader（ローダー）＝食材の下ごしらえ係：個々のファイルを「JS が食べられる形」に変換する
Plugin（プラグイン）＝シェフ：できあがった料理全体に仕上げ（最適化・HTML生成など）を施す

主なローダーの種類

ローダー	変換内容
`babel-loader`	最新JSを古いブラウザ向けに変換（ES6+ → ES5）
`css-loader`	CSSファイルをJSから読み込めるようにする
`style-loader`	CSSをDOMに注入する
`file-loader` / `asset/resource`	画像・フォントをコピーしURLを解決する
`ts-loader`	TypeScriptをJSに変換する
`sass-loader`	SassをCSSに変換する

歴史と背景

2012年 — Tobias Koppers（ドイツの開発者）が個人プロジェクトとして開発開始。当時はBrowserifyが主流だったが、CSSや画像も扱えるより柔軟なバンドラーを目指した
2014年 — InstagramがReactと組み合わせてwebpackを採用し、一気に注目を集める
2016年 — webpack 2リリース。Tree Shaking（使われていないコードを削除する機能）を標準サポート
2017年 — webpack 3リリース。Scope Hoistingで実行速度が向上
2018年 — webpack 4リリース。modeの追加でゼロコンフィグ（設定なし）でも動作可能に。ビルド速度も大幅改善
2020年 — webpack 5リリース。モジュールフェデレーション（複数アプリ間でモジュールを共有）など高度な機能を追加。長期的な安定版として現在も広く使用される
2021年以降 — ViteやesbuildなどRustやGoベースの高速バンドラーが台頭。webpackも大規模プロジェクトでは依然主力だが、ツール選定の多様化が進む

関連ツールとの比較

webpackは万能ですが、用途によって使い分けるツールも増えています。

ツール	特徴	向いているケース
webpack	設定の柔軟性が高い。大規模・複雑な構成に対応	大規模SPA・複雑なビルド要件
Vite	開発時はネイティブESM、ビルドはRollup。超高速	新規プロジェクト・中小規模SPA
Rollup	ライブラリ向け。Tree Shakingが優秀	npmパッケージの作成
esbuild	Go製で圧倒的に速い。設定はシンプル	高速なトランスパイルが必要な場面
Parcel	設定不要で即使える。ゼロコンフィグ	小規模・プロトタイプ

webpackのビルドフロー（SVG図解）

webpack.config.js の基本構成

// webpack.config.js（本番用の基本例）
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  mode: 'production',           // 本番モード（自動で最適化）
  entry: './src/index.js',      // エントリーポイント
  output: {
    filename: 'bundle.[contenthash].js', // ハッシュ付きファイル名
    path: path.resolve(__dirname, 'dist'),
    clean: true,                // ビルド前にdistを掃除
  },
  module: {
    rules: [
      {
        test: /\.js$/,          // .jsファイルに適用
        use: 'babel-loader',    // Babelで変換
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'], // 右から順に適用
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // HTMLを自動生成
    }),
  ],
};

仕様	内容
ECMAScript Modules (ESM)	`import`/`export` 構文の標準仕様（TC39／ECMA-262）
CommonJS Modules	`require()`/`module.exports` の仕様。Node.js の標準形式