Webpack

问题：前端资源碎片化，依赖关系手动管理

手动管理：index.html 里写 20 个 script 标签，顺序错了就报错，
         重复引入导致全局变量冲突，无法按需加载

解决：自动分析依赖 + 模块化打包 + 代码分割

Webpack：从 entry 递归构建模块图 → Loader 转换 → Plugin 优化 → 输出 bundle

┌───────────────────────────────────────┐
│           Loader（文件转换）            │  ← 把非 JS 文件转成 Webpack 能理解的模块
└─────────────────┬─────────────────────┘
                  │ 从右往左，管道式执行
                  ▼
┌───────────────────────────────────────┐
│         Plugin（生命周期介入）           │  ← 在编译的任意阶段执行自定义逻辑
└───────────────────────────────────────┘

// Loader：文件级别的转换
module: {
  rules: [
    {
      test: /\.scss$/,
      use: ["style-loader", "css-loader", "sass-loader"],
      // 执行顺序：sass-loader → css-loader → style-loader（从右往左）
    },
  ];
}

// Plugin：构建生命周期级别的介入
class MyPlugin {
  apply(compiler) {
    compiler.hooks.emit.tapAsync("MyPlugin", (compilation, callback) => {
      // 在资源输出前做一些处理
      callback();
    });
  }
}

// Loader 的执行流程
// pitch1 → pitch2 → pitch3 → 读取资源 → normal3 → normal2 → normal1

// 如果 pitch2 返回了值：
// pitch1 → pitch2（返回值）→ normal1
// 跳过了 pitch3 和 normal3，也不读取资源

// style-loader 利用 pitch 机制把 CSS 代码内联到 JS 中

// Compiler 管理不变的东西
class Compiler {
  constructor(context) {
    this.options = config;
    this.hooks = { run, compile, emit, done /* ... */ };
    this.watchFileSystem = null;
  }
}

// Compilation 管理每次编译特有的东西
class Compilation {
  constructor(compiler) {
    this.modules = new Set(); // 本次编译的模块
    this.chunks = new Set(); // 本次编译的 Chunk
    this.assets = {}; // 本次编译的输出资源
    this.moduleGraph = new ModuleGraph();
  }
}

初始化 → 编译 → 构建 → seal → 输出

1. 初始化：创建 Compiler 实例，注册所有 Plugin
2. 编译：触发 compile 钩子，创建新的 Compilation 实例
3. 构建：从 entry 递归处理每个模块（Loader 转换 → Parser 解析 → 生成 Dependency）
4. seal：核心优化阶段（模块优化 → Chunk 分组 → Chunk 优化 → 代码生成）
5. 输出：遍历所有 assets 写入文件系统

// CommonJS：require() 是运行时调用，编译时无法确定导出了什么
const utils = require("./utils");
// utils.a? utils.b? 编译器不知道

// ES Module：import/export 是静态声明，编译时就能确定依赖关系
import { a, b } from "./utils";
// 编译器明确知道只用了 a 和 b

// 1. 解析：HarmonyImportDependencyParserPlugin 解析 import/export
//    → 生成 Dependency 对象，记录引用的 exports

// 2. 标记：FlagDependencyUsagePlugin 从入口遍历模块图
//    → 调用 getReferencedExports 标记每个模块的 usedExports

// 3. SideEffects 分析：SideEffectsFlagPlugin 检查 package.json
//    → sideEffects: false 的模块，未使用的 export 可以整个删除

// 4. 代码生成：根据 usedExports 决定保留哪些 export
//    → 输出注释标记 /* unused harmony export xxx */

// 5. 压缩：Terser 删除 dead code
//    → 最终清除未使用的代码

{
  "sideEffects": ["*.css", "*.global.js"]
}

// 缓存配置
cache: {
  type: 'filesystem',
  cacheDirectory: path.resolve(__dirname, '.cache'),
  buildDependencies: {
    config: [__filename]  // 配置文件变更时缓存失效
  }
}
// 缓存失效策略：文件内容/时间戳快照变更、webpack.config.js 变更、package.json 变更
// 第二次构建通常显著快于首次，具体取决于缓存命中率

// 注册了两个 tap 后，Tapable 动态生成的函数（等价于）：
function(arg0, arg1) {
  var _x = this._x;           // [fn0, fn1]
  var _fn0 = _x[0];
  var _result0 = _fn0(arg0, arg1);
  var _fn1 = _x[1];
  var _result1 = _fn1(arg0, arg1);
}

// 缓存配置
cache: {
  type: 'filesystem',
  cacheDirectory: path.resolve(__dirname, '.cache'),
  buildDependencies: {
    config: [__filename]  // 配置文件变更时缓存失效
  }
}
// 缓存失效策略：文件内容/时间戳快照变更、webpack.config.js 变更、package.json 变更
// 第二次构建通常显著快于首次，这是 Webpack 5 最重要的性能优化