# webpack

## 概要

webpack は、ECMAScript/CommonJS/AMD モジュールをブラウザ向けにバンドルする JavaScript モジュールバンドラーです。コードベースを複数のバンドルに分割し、オンデマンドで読み込むことが可能です。ローダーを通じて JSON、JSX、ES7、CSS、Less などのファイルを前処理する拡張性の高いビルドツールです。

## 主な機能

| 機能カテゴリ | 説明 |
| --- | --- |
| モジュールバンドル | ESM / CommonJS / AMD 形式のモジュールを解決し、ブラウザ向けにバンドル |
| コード分割 | エントリーポイント分割、動的インポート（`import()`）、SplitChunksPlugin によるチャンク最適化 |
| ローダー | ファイルの前処理（Babel、TypeScript、CSS、画像など）をパイプライン化 |
| プラグインシステム | Tapable ベースのフック機構による柔軟なビルドプロセスの拡張 |
| Tree Shaking | ESM の静的解析により未使用コードを除去（SideEffectsFlagPlugin、InnerGraphPlugin） |
| Hot Module Replacement | 開発中にモジュール単位でのライブリロードを実現 |
| アセット管理 | Asset Modules により画像・フォントなどの静的アセットをネイティブに処理 |
| CSS サポート | ネイティブ CSS モジュールのパース・生成に対応 |
| WebAssembly | 同期・非同期の Wasm モジュール読み込みに対応 |
| Module Federation | マイクロフロントエンド向けにモジュールのリモート共有を実現（container） |
| キャッシュ | メモリキャッシュおよびファイルシステムキャッシュによるリビルド高速化 |
| ソースマップ | 各種 devtool 設定による柔軟なソースマップ生成 |
| 最適化 | コード圧縮（Terser）、チャンク結合、モジュール連結（Scope Hoisting）など |

## 技術スタック

### コア

- 言語: JavaScript (Node.js)
- 型定義: TypeScript（`types.d.ts`、`declarations/`）
- ランタイム要件: Node.js >= 10.13.0
- パッケージマネージャー: Yarn 1.22.22

### 主要ライブラリ

- **tapable** (^2.3.0) - プラグインフック機構
- **enhanced-resolve** (^5.20.0) - モジュール解決
- **acorn** (^8.16.0) - JavaScript パーサー
- **webpack-sources** (^3.3.4) - ソースコード抽象化
- **watchpack** (^2.5.1) - ファイル監視
- **loader-runner** (^4.3.1) - ローダー実行
- **terser-webpack-plugin** (^5.3.16) - コード圧縮
- **schema-utils** (^4.3.3) - 設定スキーマ検証
- **eslint-scope** (5.1.1) - スコープ解析
- **@webassemblyjs/ast, wasm-edit, wasm-parser** - WebAssembly 処理
- **browserslist** (^4.28.1) - ブラウザターゲット解決
- **es-module-lexer** (^2.0.0) - ESM 高速レキサー

## ディレクトリ構成

```
webpack-main/
├── bin/                    # CLI エントリーポイント (webpack コマンド)
├── lib/                    # コアソースコード
│   ├── asset/              # Asset Modules (画像・フォント等の処理)
│   ├── async-modules/      # 非同期モジュールサポート
│   ├── cache/              # メモリ・ファイルシステムキャッシュ
│   ├── config/             # 設定の正規化・デフォルト値
│   ├── container/          # Module Federation
│   ├── css/                # ネイティブ CSS モジュール
│   ├── debug/              # デバッグユーティリティ
│   ├── dependencies/       # 依存関係の種別定義
│   ├── electron/           # Electron ターゲットサポート
│   ├── errors/             # エラー型定義
│   ├── esm/               # ESM 出力サポート
│   ├── hmr/                # Hot Module Replacement
│   ├── ids/                # モジュール・チャンク ID 生成
│   ├── javascript/         # JavaScript パーサー・ジェネレーター
│   ├── json/               # JSON モジュール処理
│   ├── library/            # ライブラリ出力形式 (UMD, CommonJS 等)
│   ├── logging/            # ロギング基盤
│   ├── node/               # Node.js ターゲットサポート
│   ├── optimize/           # 最適化プラグイン群
│   ├── performance/        # パフォーマンス警告
│   ├── prefetch/           # プリフェッチ・プリロード
│   ├── rules/              # ルール条件マッチング
│   ├── runtime/            # ランタイムモジュール
│   ├── schemes/            # URI スキーム (data:, file:, http:)
│   ├── serialization/      # シリアライゼーション
│   ├── sharing/            # モジュール共有 (Module Federation)
│   ├── stats/              # ビルド統計情報
│   ├── url/                # URL 処理
│   ├── util/               # 汎用ユーティリティ
│   ├── wasm/               # Wasm 共通
│   ├── wasm-async/         # 非同期 Wasm
│   ├── wasm-sync/          # 同期 Wasm
│   ├── web/                # Web ターゲットサポート
│   └── webworker/          # Web Worker サポート
├── hot/                    # HMR クライアントランタイム
├── schemas/                # JSON Schema (設定バリデーション)
├── declarations/           # TypeScript 型宣言
├── assembly/               # AssemblyScript ソース
├── examples/               # 使用例
├── test/                   # テストスイート
├── tooling/                # ビルド・コード生成ツール
├── setup/                  # 開発環境セットアップ
└── docs/                   # ドキュメント
```

## セットアップ

### 必要条件

- Node.js >= 10.13.0
- Yarn 1.x

### プロジェクトとして利用する場合

```bash
npm install webpack webpack-cli --save-dev
```

### 開発者として参加する場合

```bash
git clone https://github.com/webpack/webpack.git
cd webpack
yarn install
yarn setup
```

`yarn setup` は、`node_modules/webpack` にプロジェクトルートへのシンボリックリンクを作成し、webpack が自身をビルドできるようにします。

## 開発

### Lint

```bash
# 全 lint チェック (ESLint + 型チェック + フォーマット + スペルチェック)
yarn lint

# ESLint のみ
yarn lint:code

# 型チェック
yarn lint:types

# スペルチェック
yarn lint:spellcheck
```

### フォーマット

```bash
# Prettier によるフォーマット
yarn fmt

# フォーマットチェック (CI 向け)
yarn fmt:check
```

### 自動修正

```bash
# ESLint + 特殊 lint + フォーマットを一括修正
yarn fix
```

### テスト

```bash
# 全テスト実行 (lint 含む)
yarn test

# テストのみ (lint スキップ)
yarn test:base

# 単体テスト
yarn test:unit

# 基本テスト
yarn test:basic

# 結合テスト
yarn test:integration
```

テストは Jest で実行され、`--expose-gc` および `--experimental-vm-modules` フラグ付きで Node.js が起動されます。

### カバレッジ

```bash
yarn cover
```

### ベンチマーク

```bash
yarn benchmark
```

### pre-commit フック

Husky + lint-staged により、コミット時に変更ファイルへ ESLint 自動修正・Prettier フォーマット・スペルチェックが実行されます。
