webpack 源码研究

getPath(filename, data = {}) 总结：根据 filename 模板和 hash 插值，生成资源路径字符串。 getPathWithInfo(filename, data =

getAssets() 📌 功能 返回一个所有已生成资源（assets）的只读数组。 getAsset(name) 📌 功能 根据名称获取一个特定的资源（asset），如果没有找到则返回 undefi

1. emitAsset(file, source, assetInfo = {}) ✅ 作用： 向 assets 中添加一个新的资源或更新已有资源，同时处理冲突、合并信息等。 ✅ 核心逻辑： 如果

初始化主 Hash 对象 使用配置中的 hashFunction（如 md4, sha256 等） 如果有设置 hashSalt，先将其加入 hash 中 加入子 Compilation / 警告 /

assignDepths(modules) 作用：为一组模块计算并分配深度，深度表示模块在依赖图中的层级。 实现：使用广度优先搜索（BFS）遍历所有模块，并按层级（深度）进行标记。 getDepend

addChunkInGroup(groupOptions, module, loc, request) 作用：添加或获取一个代码块组（ChunkGroup）。 逻辑： 如果提供了 groupOptio

_codeGenerationModule 功能： 执行模块的代码生成，并利用缓存优化性能。 先检查缓存是否有已生成的代码，如果有，则直接使用。 如果缓存中没有，则执行代码生成，并存储到缓存中。 代码

reportDependencyErrorsAndWarnings(module, blocks) 递归遍历 blocks，获取所有依赖 (dependencies) 的错误 (getErrors()

seal 方法是 Webpack 编译过程中非常重要的一步，它处理了许多关键任务，包括优化、生成 Chunk 图、计算哈希值、生成代码等。以下是对 seal 方法流程的总结：、 初始化 ChunkGr

这个方法 _computeAffectedModules 主要用于计算受影响的模块，并更新它们的内存缓存状态，确保 Webpack 编译过程中所有模块的依赖关系得到正确处理。 初始化缓存结构 获取全局

_addEntryItem 方法 该方法用于添加一个入口项（entry item），并触发相应的 Webpack 钩子。 参数 context：入口的上下文路径（context path）。 entr

这部分 Webpack 源码主要负责模块的创建和管理： _factorizeModule：用于解析模块，调用工厂创建模块，并处理依赖项。 addModuleChain 和 addModuleTree：

> 这一节中主要介绍了模块依赖的处理，其中有对模块队列中添加模块，有和理依赖间关系的函数，对模块进行排序的函数，从软缓存中恢复模块的函数以及添模块添加到模块图的一些方法 ```js /** * 处理模

> 这一节中主要介绍了webpack 中的统计信息管理，日志获取以及模块构的添加以及缓存获取，之类的方法。 ```js /** * 获取当前编译的统计信息对象。 * @returns {Stats}

> 这一节中主要对编译器新建时的执行流程做了一些，对构子部分的汪册以及对资源的处理。 ```js constructor(compiler, params) { // 兼容模式的标志，继承自 comp

> 这一节主要了描述了核心编译器的工具类方法，期中最容易理解的是 unsafeCacheData 存储依赖到模块的映射 ```js /** * @typedef {object} KnownCreat

> webpack 紧接入口文件创建编译器时，会创建大量的勾子，并对勾子对象的变量进行初始化。其中还有获取缓存的API，获取基础设施日志记录器，清理上一次编译的残留数据，清理上一个 `NormalMo

> 本章主要介绍了 webapck 中的入口文件其中有创建编译勾子与多个webpack 配置的创建，还有webpack 的入口函数 ```js /* MIT License http://www.op

> webpack.js 这是webpack 最早运行的文件，会查看是否安装 webpack 套件。然后对用户进行引导。 ```js #!/usr/bin/env node /** * @param

webpack 入口 webpack 入口的书写方式有三种 webpack 加载器 webpack css-loader 加载器 webpack 插件(plus) webpack 与加载器类型 web