概述

Webpack是一个用于JavaScript应用程序的模块打包工具。它转换，打包并组合代码和其他资源，以便在浏览器或其他平台上使用。本节内容提供了Webpack仓库架构的高层次概述，以及其核心系统及其交互方式。

什么是Webpack

Webpack是一个静态模块打包工具，它通过分析应用程序的模块依赖关系图生成一个或多个打包文件。虽然主要是专注于JavaScript，但是Webpack可以通过其加载器(loader)系统转换几乎所有类型的文件。本质上，Webpack分析具有依赖关系的模块，生成打包文件，作为浏览器或其他环境的静态资源。

20250614183514

核心系统架构

Webpack由几个关键系统组成，这些系统协同工作以处理模块并生成输出。其架构高度模块化并且可扩展，围绕着插件系统构建。

20250614183646

编译流程

Webpack的编译过程包括：配置处理，模块解析，转换，优化和代码生成。

graph TD
    %% Webpack构建流程横向示意图
    subgraph 配置处理
        A[Process Configuration] --> B[Normalize Options]
        B --> C[Validate Options]
    end
    
    subgraph 模块解析
        D[Make] --> E[Build Modules]
        E --> F[Parse Modules]
        F --> G[Resolve Dependencies]
        G --> M[New Dependencies]
        M --> E
    end
    
    subgraph 优化
        G --> H[Optimize]
    end
    
    subgraph 输出
        H --> I[Create Chunks]
        I --> J[Generate Code]
        J --> K[Generate Hashes]
        K --> L[Emit Assets]
    end
    
    %% 连接各阶段
    C --> D
    
    %% 样式定义
    classDef config fill:#D6EAF8,stroke:#3498DB,font-size:14px
    classDef compile fill:#D5F5E3,stroke:#2ECC71,font-size:14px
    classDef optimize fill:#FCF3CF,stroke:#F1C40F,font-size:14px
    classDef output fill:#E8DAEF,stroke:#9B59B6,font-size:14px
    
    class A,B,C config
    class D,E,F,G,M compile
    class H optimize
    class I,J,K,L output

入口和API使用

Webpack可以通过其Node.js 或命令行界面(webpack-cli)以编程的方式使用。

命令行界面

bin/webpack.js脚本作为CLI使用的入口。它会检查webpack-cli是否存在，如果存在，就将任务委托给webpack-cli。

20250614185711

Node.js API

lib/webpack.js导出webpack函数，它是用编程的方式使用的主要入口。

20250614185931

模块处理系统

Webpack的核心功能是处理模块。它处理各种模块类型并管理他们的依赖关系。

20250614190108

graph TB
    %% Webpack模块处理系统
        A[Source File] --> B[Module Resolver]
        B --> C[Normal Module Factory]
        C --> D[Module]
        C -.- E[Module Types]
        D --> F[Loaders]
        F --> G[Parser]
        G --> H[Dependencies]
        H --Create--> I[Module Graph]
        I --> J[Optimization]
        J --Create--> K[Chunks Graph]
        K --Generates--> L[Output Assets]
       
    %% 样式定义
    classDef config fill:#D6EAF8,stroke:#3498DB,font-size:14px
    classDef compile fill:#D5F5E3,stroke:#2ECC71,font-size:14px
    classDef optimize fill:#FCF3CF,stroke:#F1C40F,font-size:14px
    classDef output fill:#E8DAEF,stroke:#9B59B6,font-size:14px
    
    class A,B,C config
    class D,E,F,G,M,H,I compile
    class J,K,L optimize