# アーキテクチャ構成図

## 1. システム全体構成図

```mermaid
graph TB
    subgraph External["外部システム"]
        CLI["webpack-cli"]
        FS["ファイルシステム"]
        Loaders["ローダー群<br/>(babel-loader, css-loader等)"]
        UserPlugins["ユーザプラグイン"]
    end

    subgraph Entry["エントリーポイント"]
        BinWebpack["bin/webpack.js"]
        LibIndex["lib/index.js"]
        LibWebpack["lib/webpack.js"]
    end

    subgraph Core["コンパイラコア"]
        Compiler["Compiler"]
        MultiCompiler["MultiCompiler"]
        WebpackOptionsApply["WebpackOptionsApply"]
        Watching["Watching"]
    end

    subgraph Config["構成・設定"]
        Normalization["config/normalization.js"]
        Defaults["config/defaults.js"]
        Target["config/target.js"]
        ValidateSchema["validateSchema.js"]
        Schemas["schemas/WebpackOptions.json"]
    end

    subgraph CompilationLayer["コンパイル"]
        Compilation["Compilation"]
        NMF["NormalModuleFactory"]
        CMF["ContextModuleFactory"]
        BuildChunkGraph["buildChunkGraph"]
    end

    subgraph GraphLayer["グラフ"]
        ModuleGraph["ModuleGraph"]
        ChunkGraph["ChunkGraph"]
        ExportsInfo["ExportsInfo"]
    end

    CLI --> BinWebpack
    BinWebpack --> LibIndex
    LibIndex --> LibWebpack
    LibWebpack --> Normalization
    LibWebpack --> Defaults
    LibWebpack --> Compiler
    LibWebpack --> MultiCompiler
    Compiler --> WebpackOptionsApply
    Compiler --> Compilation
    Compiler --> Watching
    WebpackOptionsApply --> Config
    Compilation --> NMF
    Compilation --> CMF
    Compilation --> BuildChunkGraph
    Compilation --> ModuleGraph
    Compilation --> ChunkGraph
    Compilation --> ExportsInfo
    NMF --> Loaders
    Compiler --> FS
    UserPlugins --> Compiler
```

## 2. コンパイルパイプライン図

```mermaid
flowchart TD
    Start["webpack(options)"] --> Normalize["オプション正規化<br/>getNormalizedWebpackOptions"]
    Normalize --> ApplyDefaults["デフォルト値適用<br/>applyWebpackOptionsDefaults"]
    ApplyDefaults --> CreateCompiler["Compiler生成"]
    CreateCompiler --> ApplyEnv["NodeEnvironmentPlugin適用"]
    ApplyEnv --> ApplyUserPlugins["ユーザプラグイン適用"]
    ApplyUserPlugins --> ApplyOptions["WebpackOptionsApply<br/>(内部プラグイン群の適用)"]
    ApplyOptions --> Initialize["compiler.hooks.initialize"]
    Initialize --> Run["compiler.run()"]
    Run --> BeforeRun["hooks.beforeRun"]
    BeforeRun --> RunHook["hooks.run"]
    RunHook --> Compile["compile()"]
    Compile --> CreateFactories["ModuleFactory群生成<br/>NormalModuleFactory<br/>ContextModuleFactory"]
    CreateFactories --> BeforeCompile["hooks.beforeCompile"]
    BeforeCompile --> CompileHook["hooks.compile"]
    CompileHook --> NewCompilation["new Compilation()"]
    NewCompilation --> Make["hooks.make<br/>(エントリーポイントからビルド開始)"]
    Make --> AddModule["addModule<br/>(モジュール追加)"]
    AddModule --> BuildModule["buildModule<br/>(ローダー実行 + パース)"]
    BuildModule --> ProcessDeps["processModuleDependencies<br/>(依存関係の再帰処理)"]
    ProcessDeps --> AddModule
    ProcessDeps --> FinishMake["hooks.finishMake"]
    FinishMake --> FinishModules["hooks.finishModules"]
    FinishModules --> Seal["seal()"]
    Seal --> BuildChunkGraph2["buildChunkGraph<br/>(チャンクグラフ構築)"]
    BuildChunkGraph2 --> Optimize["最適化フェーズ<br/>(Tree Shaking,<br/>Code Splitting,<br/>Scope Hoisting)"]
    Optimize --> CodeGen["codeGeneration<br/>(コード生成)"]
    CodeGen --> CreateHash["createHash<br/>(ハッシュ計算)"]
    CreateHash --> EmitAssets["emitAssets<br/>(ファイル出力)"]
    EmitAssets --> Done["hooks.done<br/>(Stats返却)"]
```

## 3. モジュール処理パイプライン図

```mermaid
flowchart LR
    subgraph Factory["モジュール生成"]
        NMF2["NormalModuleFactory"]
        Resolve["enhanced-resolve<br/>(パス解決)"]
        RuleSet["RuleSetCompiler<br/>(ローダー決定)"]
    end

    subgraph Build["ビルド"]
        LoaderRunner["loader-runner<br/>(ローダー実行チェーン)"]
        Source["ソースコード取得"]
    end

    subgraph Parse["パース"]
        JSParser["JavascriptParser<br/>(acornベース)"]
        CSSParser["CssParser"]
        JSONParser["JsonParser"]
        AssetParser["AssetParser"]
        WasmParser["WebAssemblyParser"]
    end

    subgraph Deps["依存関係抽出"]
        HarmonyDeps["Harmony (ESM)<br/>import/export"]
        CJSDeps["CommonJS<br/>require/exports"]
        AMDDeps["AMD<br/>define/require"]
        DynImport["Dynamic Import<br/>import()"]
        URLDeps["URL依存<br/>new URL()"]
    end

    NMF2 --> Resolve
    Resolve --> RuleSet
    RuleSet --> LoaderRunner
    LoaderRunner --> Source
    Source --> JSParser
    Source --> CSSParser
    Source --> JSONParser
    Source --> AssetParser
    Source --> WasmParser
    JSParser --> HarmonyDeps
    JSParser --> CJSDeps
    JSParser --> AMDDeps
    JSParser --> DynImport
    JSParser --> URLDeps
```

## 4. プラグインシステム構成図

```mermaid
graph TB
    subgraph Tapable["tapableフックシステム"]
        SyncHook["SyncHook"]
        SyncBailHook["SyncBailHook"]
        SyncWaterfallHook["SyncWaterfallHook"]
        AsyncSeriesHook["AsyncSeriesHook"]
        AsyncParallelHook["AsyncParallelHook"]
        AsyncSeriesBailHook["AsyncSeriesBailHook"]
        HookMap["HookMap"]
    end

    subgraph CompilerHooks["Compiler Hooks"]
        CH_env["environment"]
        CH_afterEnv["afterEnvironment"]
        CH_entryOpt["entryOption"]
        CH_beforeRun["beforeRun"]
        CH_run["run"]
        CH_compile["compile"]
        CH_make["make"]
        CH_emit["emit"]
        CH_done["done"]
    end

    subgraph CompilationHooks["Compilation Hooks"]
        CO_buildModule["buildModule"]
        CO_succeedModule["succeedModule"]
        CO_seal["seal"]
        CO_optimize["optimize"]
        CO_optimizeChunks["optimizeChunks"]
        CO_optimizeTree["optimizeTree"]
        CO_processAssets["processAssets"]
    end

    subgraph PluginCategories["プラグインカテゴリ"]
        ModulePlugins["モジュール型プラグイン<br/>JavascriptModulesPlugin<br/>CssModulesPlugin<br/>JsonModulesPlugin<br/>AssetModulesPlugin"]
        DependencyPlugins["依存関係プラグイン<br/>HarmonyModulesPlugin<br/>CommonJsPlugin<br/>AMDPlugin<br/>ImportPlugin"]
        OptimizePlugins["最適化プラグイン<br/>SplitChunksPlugin<br/>ModuleConcatenationPlugin<br/>SideEffectsFlagPlugin<br/>MangleExportsPlugin"]
        OutputPlugins["出力プラグイン<br/>EnableLibraryPlugin<br/>EnableChunkLoadingPlugin<br/>SourceMapDevToolPlugin"]
        CachePlugins["キャッシュプラグイン<br/>MemoryCachePlugin<br/>IdleFileCachePlugin"]
    end

    Tapable --> CompilerHooks
    Tapable --> CompilationHooks
    ModulePlugins --> CompilerHooks
    ModulePlugins --> CompilationHooks
    DependencyPlugins --> CompilationHooks
    OptimizePlugins --> CompilationHooks
    OutputPlugins --> CompilerHooks
    CachePlugins --> CompilerHooks
```

## 5. キャッシュシステム構成図

```mermaid
graph TB
    subgraph CacheInterface["キャッシュインターフェース"]
        Cache["Cache<br/>(hooks: get/store/beginIdle/endIdle/shutdown)"]
        CacheFacade["CacheFacade<br/>(getItemCache/store/get)"]
    end

    subgraph MemoryCache["メモリキャッシュ"]
        MCP["MemoryCachePlugin"]
        MGCP["MemoryWithGcCachePlugin<br/>(世代管理GC対応)"]
    end

    subgraph FileCache["ファイルキャッシュ"]
        IFCP["IdleFileCachePlugin<br/>(アイドル時永続化)"]
        PFCS["PackFileCacheStrategy<br/>(パック形式ストレージ)"]
    end

    subgraph Serialization["シリアライゼーション"]
        ObjMW["ObjectMiddleware<br/>(オブジェクト <-> シリアライズ)"]
        BinMW["BinaryMiddleware<br/>(バイナリエンコード)"]
        FileMW["FileMiddleware<br/>(ファイルI/O)"]
    end

    subgraph ResolverCache["リゾルバキャッシュ"]
        RCP["ResolverCachePlugin"]
    end

    CacheFacade --> Cache
    Cache --> MCP
    Cache --> MGCP
    Cache --> IFCP
    IFCP --> PFCS
    PFCS --> ObjMW
    ObjMW --> BinMW
    BinMW --> FileMW
    RCP --> Cache
```

## 6. Module Federationの構成図

```mermaid
graph TB
    subgraph HostApp["ホストアプリケーション"]
        ContainerRef["ContainerReferencePlugin"]
        RemoteModule["RemoteModule"]
        FallbackModule["FallbackModule"]
    end

    subgraph RemoteApp["リモートアプリケーション"]
        ContainerPlugin["ContainerPlugin"]
        ContainerEntry["ContainerEntryModule"]
        ExposedDep["ContainerExposedDependency"]
    end

    subgraph Sharing["共有モジュール"]
        SharePlugin["SharePlugin"]
        ConsumeShared["ConsumeSharedPlugin"]
        ProvideShared["ProvideSharedPlugin"]
        ShareRuntime["ShareRuntimeModule"]
    end

    subgraph Federation["ModuleFederationPlugin"]
        MFP["ModuleFederationPlugin<br/>(統合プラグイン)"]
    end

    MFP --> ContainerPlugin
    MFP --> ContainerRef
    MFP --> SharePlugin
    SharePlugin --> ConsumeShared
    SharePlugin --> ProvideShared
    ContainerRef --> RemoteModule
    RemoteModule --> FallbackModule
    ContainerPlugin --> ContainerEntry
    ContainerEntry --> ExposedDep
    ConsumeShared --> ShareRuntime
    ProvideShared --> ShareRuntime
```

## 7. ランタイムモジュール構成図

```mermaid
graph TB
    subgraph RuntimeBase["ランタイム基盤"]
        RuntimePlugin["RuntimePlugin"]
        RuntimeModule["RuntimeModule (基底クラス)"]
        RuntimeGlobals["RuntimeGlobals<br/>(ランタイムAPI定義)"]
    end

    subgraph ChunkLoading["チャンクロード"]
        JsonpCL["JsonpChunkLoadingRuntimeModule<br/>(ブラウザ: JSONP)"]
        RequireCL["RequireChunkLoadingRuntimeModule<br/>(Node.js: require)"]
        ReadFileCL["ReadFileChunkLoadingRuntimeModule<br/>(Node.js: readFile)"]
        ModuleCL["ModuleChunkLoadingRuntimeModule<br/>(ESM: import())"]
        ImportScripts["ImportScriptsChunkLoading<br/>(WebWorker)"]
    end

    subgraph ModuleRuntime["モジュールランタイム"]
        DefinePropertyGetters["DefinePropertyGettersRuntimeModule"]
        MakeNamespace["MakeNamespaceObjectRuntimeModule"]
        CompatDefault["CompatGetDefaultExportRuntimeModule"]
        HasOwnProperty["HasOwnPropertyRuntimeModule"]
    end

    subgraph AssetRuntime["アセットランタイム"]
        PublicPath["PublicPathRuntimeModule"]
        GetChunkFilename["GetChunkFilenameRuntimeModule"]
        LoadScript["LoadScriptRuntimeModule"]
        CreateScriptUrl["CreateScriptUrlRuntimeModule"]
    end

    subgraph HMRRuntime["HMRランタイム"]
        HMRModule["HotModuleReplacementRuntimeModule"]
    end

    RuntimePlugin --> RuntimeModule
    RuntimeModule --> ChunkLoading
    RuntimeModule --> ModuleRuntime
    RuntimeModule --> AssetRuntime
    RuntimeModule --> HMRRuntime
    RuntimeGlobals --> RuntimeModule
```

## 8. 最適化パイプライン図

```mermaid
flowchart TD
    Seal["seal() 開始"] --> FlagExports["FlagDependencyExportsPlugin<br/>(エクスポート情報の解析)"]
    FlagExports --> FlagUsage["FlagDependencyUsagePlugin<br/>(使用状況の解析 - Tree Shaking)"]
    FlagUsage --> SideEffects["SideEffectsFlagPlugin<br/>(サイドエフェクト分析)"]
    SideEffects --> InnerGraph["InnerGraphPlugin<br/>(内部グラフ分析)"]
    InnerGraph --> EnsureConditions["EnsureChunkConditionsPlugin"]
    EnsureConditions --> RemoveParent["RemoveParentModulesPlugin<br/>(親チャンクのモジュール重複排除)"]
    RemoveParent --> RemoveEmpty["RemoveEmptyChunksPlugin<br/>(空チャンク除去)"]
    RemoveEmpty --> MergeDuplicate["MergeDuplicateChunksPlugin<br/>(重複チャンク統合)"]
    MergeDuplicate --> FlagIncluded["FlagIncludedChunksPlugin"]
    FlagIncluded --> SplitChunks["SplitChunksPlugin<br/>(コード分割)"]
    SplitChunks --> Concatenation["ModuleConcatenationPlugin<br/>(スコープホイスティング)"]
    Concatenation --> MangleExports["MangleExportsPlugin<br/>(エクスポート名短縮)"]
    MangleExports --> ModuleIds["ModuleIds割り当て<br/>(deterministic/named/natural)"]
    ModuleIds --> ChunkIds["ChunkIds割り当て<br/>(deterministic/named/natural)"]
    ChunkIds --> RealContentHash["RealContentHashPlugin<br/>(コンテンツハッシュ計算)"]
    RealContentHash --> CodeGen["コード生成"]
```
