webpack复习-构建原理

初始化

从配置文件、配置对象、命令行参数、默认配置中计算得到最终的参数，创建Compiler初始化编译环境：包括注入内置插件、注册各种模块工厂、初始化RuleSet等

确定入口

根据配置中的entry找到所有入口文件，调用compilation.addEntry将入口文件转化为dependence对象

构建

根据entry对应的dependence创建module对象，调用loader将模块转译为标准 JavaScript 内容，调用 JavaScript 解释器将内容转换为 AST 对象，从中找出该模块依赖的模块，再递归本步骤直到所有入口依赖文件都经过本步骤的处理。递归完成之后就得到了模块间的依赖关系图

这个过程中数据流大致是module => ast => dependencies => module，先转 AST 再从 AST 找依赖。这就要求loaders处理完的最后结果必须是可以被acorn处理的标准 JavaScript 语法，比如说对于图片，需要从图像二进制转换成类似于export default "data:image/png;base64,xxx"这类 base64 格式或者export default "http://xxx"这类 url 格式

生成

构建阶段围绕module展开，生成阶段则围绕Chunks展开。经过构建阶段后，webpack 已经得到足够的模块内容与模块关系信息，根据入口和模块之间的依赖关系，组装成一个个包含多个模块的Chunk，再把每个Chunk转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会。在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统

webpack 内置的chunk封装规则：

• entry 及 entry 能触及到的模块，组成一个chunk
• 使用动态引入语句的模块，各自组合成一个chunk
• 通过optimization.splitChunks来强制设定公用模块导出为一个chunk

资源形态流转

• compiler.make，将entry以dependence对象形式加入compilation的依赖列表，dependence对象记录有entry的类型、路径等信息。根据dependence调用对应的工厂函数创建module对象，之后读入module对应的文件内容，调用loader-runner对内容转化，转化结果若有其他依赖则继续读入依赖资源，重复此过程直到所有依赖均被转化为module
• compilation.seal，遍历module集合，根据entry配置及引入资源的方式，将module分配到不同的chunk，遍历chunk集合，调用compilation.emitAsset方法标记chunk的输出规则，即转化为assets集合
• compiler.emitAssets，将assets写入文件系统

参考

[万字总结] 一文吃透 Webpack 核心原理