4-1 webpack&webpack-cli本地开发环境搭建
为什么要搭建本地调试环境
学习和深入理解 Webpack 的工作原理，最好的方式是直接阅读和调试其源码。通过搭建本地的 Webpack 和 webpack-cli 开发环境，可以：
- 单步调试 Webpack 的构建流程
- 理解 Loader 和 Plugin 的执行机制
- 排查复杂的构建问题
- 为贡献 Webpack 开源代码做准备
环境准备
前置要求
| 工具 | 版本要求 |
|---|---|
| Node.js | 18+ LTS |
| Git | 2.x |
| IDE | VSCode（推荐） |
| 操作系统 | macOS / Linux / Windows |
克隆源码仓库
# 创建工作目录
mkdir webpack-debug && cd webpack-debug
# 克隆 webpack 源码
git clone https://github.com/webpack/webpack.git
# 克隆 webpack-cli 源码
git clone https://github.com/webpack/webpack-cli.git
bash
安装依赖
# 安装 webpack 依赖
cd webpack
npm install
# 安装 webpack-cli 依赖
cd ../webpack-cli
npm install
bash
链接本地模块
为了让调试项目使用本地的 Webpack 源码而非 npm 安装版本，需要进行模块链接：
# 在 webpack 源码目录执行 link
cd webpack
npm link
# 在 webpack-cli 源码目录执行 link
cd ../webpack-cli
npm link
# 在调试项目中链接本地模块
cd ../debug-project
npm link webpack webpack-cli
bash
VSCode 调试配置
创建 launch.json
在调试项目的 .vscode/launch.json 中添加配置：
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Debug Webpack Build",
"program": "${workspaceFolder}/node_modules/webpack-cli/bin/cli.js",
"args": ["--mode", "development"],
"cwd": "${workspaceFolder}",
"sourceMaps": true,
"resolveSourceMapLocations": [
"${workspaceFolder}/**",
"!**/node_modules/**"
],
"skipFiles": ["<node_internals>/**"]
}
]
}
json
断点调试
- 在 VSCode 中打开 webpack 源码目录
- 在关键位置设置断点（如
lib/webpack.js的createCompiler函数） - 按 F5 启动调试
- 程序会在断点处暂停，可以查看变量、调用栈等信息
常用调试位置
| 调试目标 | 文件路径 | 关键函数 |
|---|---|---|
| 构建入口 | lib/webpack.js | webpack() |
| 编译器创建 | lib/Compiler.js | createCompiler() |
| 模块解析 | lib/Module.js | buildModule() |
| 代码生成 | lib/CodeGenerationResults.js | getCode() |
| 插件系统 | lib/Tapable.js | call(), promise() |
调试技巧
1. 使用 node --inspect
不使用 VSCode 的情况下，可以通过 Chrome DevTools 调试：
node --inspect-brk node_modules/webpack-cli/bin/cli.js --mode development
bash
然后在 Chrome 中打开 chrome://inspect，点击 "inspect" 进入调试界面。
2. 使用 console.log 快速定位
在源码中添加 console.log 查看变量值，调试完记得移除。
3. 使用条件断点
在 VSCode 中右键断点可以设置条件，如 module.resource.includes('app.js')，只在处理特定文件时暂停。
参考资源
↑