4-5 bugwebpack-cli调试webpack源码解决办法
问题描述
在使用 webpack-cli 调试 Webpack 源码时，调试项目（通过 npx webpack init 创建）安装的是 npm 发布版本的 Webpack，而不是本地克隆的 Webpack 源码。这意味着无法在 Webpack 核心库中设置断点进行源码级调试。
解决方案：npm link
问题根因
debug-project/
└── node_modules/
└── webpack/ ← npm 安装的发布版本（压缩后，无法调试）
└── lib/
└── webpack.js
webpack/ ← 本地克隆的源码（可调试）
└── lib/
└── webpack.js
text
调试时，webpack-cli 引用的是 node_modules/webpack，而非本地的源码仓库。
使用 npm link 建立链接
在 webpack-cli 的项目目录中执行：
cd webpack-cli
npm link webpack
bash
这条命令会在 webpack-cli 的 node_modules/webpack 中创建一个符号链接，指向本地的 Webpack 源码目录。执行成功后，左侧文件浏览器的 node_modules/webpack 旁边会显示链接标记。
验证链接
在 Webpack 源码中设置断点（如 lib/webpack.js 第 8 行），启动调试后确认能命中该断点，说明链接成功。
调试 Webpack 核心源码的步骤
1. 确认断点位置
在 Webpack 核心文件中设置断点：
| 文件 | 行号 | 作用 |
|---|---|---|
webpack/lib/webpack.js | 8 行 | Webpack 模块加载入口 |
webpack/lib/webpack.js | 110 行 | Webpack 实例定义 |
webpack/lib/webpack.js | 117 行 | create 方法调用 |
2. 启动调试
在 CLI 的调试配置中启动，按以下顺序跟踪：
CLI run → entries 为空 → runWebpack()
→ createCompiler → this.webpack(config, callback)
→ 进入 webpack/lib/webpack.js（源码位置）
→ 110 行：Webpack 实例创建
→ 117 行：create 方法，开始创建 Compiler
→ 回调处理，返回 compiler 实例
text
3. 跟踪构建流程
进入 Webpack 源码后，可以在以下关键位置设置断点：
compiler创建过程callback参数传递options和webpack实例的处理- 文件系统操作和编译过程
npm link 原理
npm link 的工作原理：
# 全局链接（在包目录执行）
npm link
# 在全局 node_modules 中创建符号链接 → 当前包
# 项目链接（在使用方项目执行）
npm link <package-name>
# 在项目的 node_modules/<package-name> 中创建符号链接 → 全局链接
text
对于 webpack-cli 调试场景：
# 方式一：在 webpack-cli 目录链接（推荐）
cd webpack-cli
npm link webpack
# 方式二：先全局注册，再在项目中链接
cd webpack
npm link # 注册全局链接
cd ../debug-project
npm link webpack # 项目中使用全局链接
bash
注意事项
- 版本一致性：确保本地 Webpack 源码的版本与 webpack-cli 期望的版本兼容
- 取消链接：调试完成后，可以使用
npm unlink webpack恢复到 npm 安装版本 - 重新安装：如果链接导致问题，可以删除
node_modules后重新npm install - 多个项目共享：
npm link创建的是全局符号链接，多个项目可以同时使用
↑