webpack 概念速查

我为什么会懂这个

主流程和概念

1. 初始化，解析选项，和默认选项合并，创建编译器，得到compiler
2. 调用compiler.compile，得到compilation，记录某次编译相关的信息，如module，dependence等
3. 开始构建(make)
   1. 把entry文件加入dependence中
   2. 根据dependence调用不同的moduleFactory构建module
   3. 使用 loader-runner 把各种资源转化为 JavaScript
   4. 使用 acron parse 转化之后的 JS，遍历 AST，如果遇到依赖，就将其加入dependence
   5. 重复 234，直到所有的dependence都被处理
4. 输出文件(optimization，seal 和 emitAsset)
   1. 遍历compilation.module，一个entry引入的所有静态module分进一个chunk，一个动态引入的module及其依赖分进一个chunk
   2. 确定chunk之间的父子关系，如果父chunk提供了module，则移除当前chunk里的
   3. concatenate moudle，在 rollup 里叫 scope hoisting。对于是 ESM 且所有依赖者在同一个 chunk 内的 module，将其与父module合并，会显示成 xxx.js + 1 modules
   4. 将module改写成 IIFE，重写所有的import和export
   5. 根据特定规则从chunk生成asset，进行输出

RuntimeGlobals

hook

• 如果不关心子 compliation，用 thisCompilation 而不是 compilation