webpack 概念速查

发表于更新于阅读时长 1 分钟

我为什么会懂这个

主流程和概念

  1. 初始化,解析选项,和默认选项合并,创建编译器,得到compiler
  2. 调用compiler.compile,得到compilation,记录某次编译相关的信息,如moduledependence
  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,重写所有的importexport
    5. 根据特定规则从chunk生成asset,进行输出

RuntimeGlobals

hook

  • 如果不关心子 compliation,用 thisCompilation 而不是 compilation
© 2016 - 2022Austaras Devas