🗺️ 第一阶段：resolve —— 找路径

目标：把代码里写的简写、别名、包名，翻译成硬盘上的绝对路径。

  1. 拿到引用字符串：Webpack 在 AST 里发现了一个依赖，比如 import x from 'my-ui' 或 import './style.css'。
  2. 查 alias：看看有没有配置路径别名（比如把 @ 替换成真实的 src 目录）。
  3. 查 modules：如果是纯包名（如 my-ui），就去 node_modules 里找这个文件夹。
  4. 查说明书：找到文件夹后，看 descriptionFiles（默认 package.json），根据 mainFields 决定入口文件。
  5. 补全后缀：如果路径没有后缀，按 extensions 数组的顺序依次去试（.js -> .vue -> .json）。
  6. 处理软链接：如果发现是快捷方式，根据 symlinks 决定是顺着找真实路径，还是当成普通内部文件。
  7. 交卷：最终吐出一个确定的绝对路径（例如 D:\...\src\style.css）。

⚙️ 第二阶段：rules 与 noParse

目标：拿到真实路径后，决定用什么工具处理它，以及要不要扒它的内部依赖。

  1. 过安检（查 noParse）：Webpack 拿到绝对路径后，第一件事是看它有没有命中 noParse 配置。
    • 如果命中（比如是 jquery），在心里盖个章：“这是个铁板，一会儿处理完不准解析它的依赖”。
  2. 匹配加工厂（查 rules）：拿着绝对路径，去 module.rules 里挨个对号入座（看 test、include、exclude）。
    • 匹配成功，确定使用哪些 Loader（比如 babel-loader、style-loader）。
  3. 读取与翻译（执行 Loader）：Webpack 把文件从硬盘读成文本字符串，交给 Loader 处理。Loader 的执行顺序是从右到左。处理完毕后，Loader 必须交出一段合法的 JS 字符串。
  4. 决定是否解析（转 AST）：
    • 如果在第 1 步命中了 noParse：Webpack 直接拿着 Loader 交出的代码，跳过解析，准备打包。
    • 如果没命中 noParse：Webpack 把代码转成 AST（抽象语法树），在里面找有没有新的 import/require。
  5. 发现新依赖：如果 AST 里找到了新依赖，就把它丢回第一阶段（resolve），循环往复，直到整张依赖图构建完毕。

📦 第三阶段：Plugin 与输出

  1. 插件介入：在构建的各个生命周期（Hooks）里，Plugin 开始干活（比如拆分代码、压缩、生成 HTML）。
  2. 写入磁盘：最终把打包好的文件输出到 dist 目录。