webpack5 源码看依赖收集过程

四个概念

Module：资源在 webpack 内部的映射对象，包含了资源的路径、上下文、依赖、内容等信息

Dependency：在模块中引用其它模块

Chunk：用于组织输出结构的对象

Dependency Graph：

• ModuleGraph ：记录 Dependency Graph 信息的容器，一方面保存了构建过程中涉及到的所有 module 、dependency 对象，以及这些对象互相之间的引用；另一方面提供了各种工具方法，方便使用者迅速读取出 module 或 dependency 附加的信息
• ModuleGraphConnection ：记录模块间引用关系的数据结构，内部通过 originModule 属性记录引用关系中的父模块，通过 module 属性记录子模块。此外还提供了一系列函数工具用于判断对应的引用关系的有效性
• ModuleGraphModule ：Module 对象在 Dependency Graph 体系下的补充信息，包含模块对象的 incomingConnections —— 指向模块本身的 ModuleGraphConnection 集合，即谁引用了模块自己；outgoingConnections —— 该模块对外的依赖，即该模块引用了其他那些模块。

Module 收集过程

1、首先是进入 EntryPlugin.js,收集 entry 依赖,存入 compilation.entries,然后调用 handleModuleCreation ，通过 Compilation.prototype.factorizeModule 的异步队列开始收集 module

// 创建 Dependency 对象，将 entry 拿到并赋值
        const dep = EntryPlugin.createDependency(entry, options);
        compiler.hooks.make.tapAsync("EntryPlugin", (compilation, callback) => {
            // 入口插件,创建编译入口
            console.log("EntryPlugin", dep);
            compilation.addEntry(context, dep, options, err => {
                callback(err);
            });
        });

2、调用 addModule，添加到compilation.modules 中

addModule(module, callback) {
        // 执行_addModule
        this.addModuleQueue.add(module, callback);
    }

3、分析依赖项

通过语法树分析的依赖，Compilation.prototype.factorizeModule 的异步队列收集所有的 module，可以参考一下这篇webpack 的构建过程

Dependency

通过语法树分析的依赖

Chunk

1、是在 seal 阶段生成，通过遍历 compilation.entries,每一个 entry 都会生成一个 chunk

2、遍历 make 阶段生成的 moduleGraph 对象从而将 module 依赖关系转化为 chunkGraph 对象。