{T}

2.1 链接操作

步骤一：确认全局 webpack 已链接

bash
# 在 webpack 源码目录执行（之前已完成）
cd /path/to/webpack
npm link
 
# 此时全局 webpack 指向源码

步骤二：在 CLI 项目中链接 webpack

bash
# 进入 webpack-cli 项目目录
cd /path/to/webpack-cli
 
# 将 node_modules 中的 webpack 链接到全局
npm link webpack

执行效果：

plaintext
链接前：
node_modules/webpack/  → npm 仓库发布的版本
 
链接后：
node_modules/webpack/  → 全局 webpack → webpack 源码

2.2 链接验证

在 VS Code 中验证：

plaintext
左侧文件系统显示：
├── node_modules/
│   └── webpack →  ← 出现箭头符号，表示已链接

提示：链接成功后，node_modules/webpack 会显示一个小箭头图标，表示这是一个符号链接。

三、源码断点调试

3.1 定位源码入口

调试追踪路径：

javascript
// webpack-cli 中的调用
const webpack = require('webpack');
 
// 进入 webpack 源码位置
// webpack/lib/index.js

关键文件： webpack/lib/index.js

3.2 关键断点位置

断点设置：

javascript
// webpack/lib/index.js
 
// 【断点 1】第 8 行 - webpack 函数入口
function webpack(options, callback) {
    // 在这里打断点
    const create = require('./create');
    // ...
}
 
// 【断点 2】第 110 行 - create 导入
const create = require('./create');
 
// 【断点 3】第 117 行 - create 调用
create(options, callback);

3.3 调试过程演示

操作步骤：

plaintext
1. 在 webpack/lib/index.js 第 8 行打断点
2. 启动调试（F5 或点击调试按钮）
3. 执行命令：webpack --config webpack.config.js
4. 程序停在第 8 行断点处

调试界面操作：

操作快捷键说明
ContinueF5继续运行到下一个断点
Step OverF10单步跳过（不进入函数）
Step IntoF11单步进入（进入函数内部）
Step OutShift+F11跳出当前函数

3.4 关键代码流程

执行流程：

plaintext
webpack-cli 执行
    │
    ▼
require('webpack')
    │
    ▼
webpack/lib/index.js 第 8 行（断点）
    │
    ▼
第 110 行：导入 create
    │
    ▼
第 117 行：调用 create(options, callback)
    │
    ▼
create 方法内部
    │
    ▼
创建 compiler 对象
    │
    ▼
return compiler

create 方法作用：

javascript
// webpack/lib/create.js（简化示意）
function create(options, callback) {
    // 1. 创建 compiler 对象
    const compiler = new Compiler(options.context);
    
    // 2. 挂载插件
    // 3. 处理配置
    // 4. 初始化文件系统
    
    // 5. 返回 compiler
    return compiler;
}

四、补充说明

plaintext
npm link 工作原理：
 
第一步：创建全局链接
┌──────────────┐      npm link       ┌──────────────────┐
│  webpack/    │  ─────────────────► │  全局 npm 目录    │
│  (源码目录)   │                     │  node_modules/   │
└──────────────┘                     │  webpack → 源码   │
                                     └──────────────────┘
 
第二步：项目链接到全局
┌──────────────┐      npm link webpack   ┌──────────────────┐
│ webpack-cli/ │  ─────────────────────► │  全局 webpack    │
│ node_modules/│                         │                  │
│ webpack →    │                         │                  │
└──────────────┘                         └──────────────────┘

4.2 调试技巧总结

技巧说明
符号链接识别文件名旁出现箭头图标
断点验证调试时能进入源码即链接成功
条件断点右键断点可设置触发条件
调试控制台可在断点处执行代码查看变量

4.3 常见问题

问题解决方案
链接后调试仍进入 node_modules删除 node_modules 重新安装，再执行 link
Windows 权限问题以管理员身份运行终端
多版本冲突使用 npm unlink 取消链接后重新操作

五、学习总结

5.1 核心知识点

  1. npm link 的作用：将本地包链接到全局，实现跨项目共享
  2. 调试链路：CLI → require('webpack') → webpack 源码
  3. 断点位置：webpack/lib/index.js 是核心入口

5.2 调试流程图

plaintext
┌─────────────────────────────────────────────────────────┐
│                    完整调试链路                          │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  webpack-cli 源码                                       │
│       │                                                 │
│       │ npm link webpack                               │
│       ▼                                                 │
│  node_modules/webpack → 全局 → webpack 源码            │
│       │                                                 │
│       │ 打断点：lib/index.js                           │
│       ▼                                                 │
│  webpack(options, callback)                            │
│       │                                                 │
│       ▼                                                 │
│  create() → compiler 创建                              │
│                                                         │
└─────────────────────────────────────────────────────────┘

5.3 延伸学习

六、本节要点速查

plaintext
 问题：调试时 node_modules 中的 webpack 非源码
 解决：npm link webpack（在 CLI 项目目录执行）
 验证：VS Code 中文件夹显示箭头图标
 断点：webpack/lib/index.js 第 8 行、110 行、117 行
 效果：调试时可进入真正的 webpack 源码