如何调试webpack源码

今天这篇文章主要是科普一下，因为发现虽然方法简单，但是很多人没有接触过node方面的开发，所以就没有了解过。用node开发主要分两大类吧，一类是做工具，一类是做服务，都是可以调试的，webpack就属于工具类。

一 node调试

讲怎么调试webpack之前，先看最基本node执行js文件的调试。node官网的debugger章节讲的很清楚，我再补充一些操作的图。

平时我们执行一个文件的时候就是 node server.js, 加上一个--inspect或者--inspect-brk 参数就能启动调试了，区别是--inspect-brk会在代码的第一行进行断点停留，我平时都用这个，因为我测试--inspect第一次执行代码断点不会停留。

执行：

node --inspect-brk server.js

会看到这样的输出

Debugger listening on ws://127.0.0.1:9229/e27919ae-288d-436c-b06e-c1b9740ef8bd
For help, see: https://nodejs.org/en/docs/inspector

这是启用了 V8 检查器，启动了一个ws服务，默认端口9229，加一个动态生成的UUID, 这时需要一个可以连接该服务的调试客户端，因为使用了 Chrome 开发者工具协议, 所以可以用chrome的开发者工具进行调试。

打开chrome的开发者工具页面，如果看到node的绿色图标，点击就可进入调试，默认9229端口会显示。

如果没有，在chrome的地址栏输入chrome://inspect/#devices可以看到如下图所示，Remote Target 中会有你启动调试的文件，点击inspect

如果你是自定义的端口

node --inspect-brk=5000 server.js

则点击上图中Discover network targets 右侧的按钮，添加上你启动的端口即可。

二 webpack命令的调试

掌握了node的调试，离怎么调试webpack源码就差一个webpack命令的启动文件在哪了。科普一下node怎么写命令行工具，npm包的bin字段指定命令的名字和对应执行的启动文件，例如webpack-cli的package.json

{
  "name": "webpack-cli",
  "bin": {
    "webpack-cli": "./bin/cli.js"
  }
 }

本地安装时，会把启动文件软链接到项目的node_modules/.bin目录下，全局安装时会软链接到当前node环境的bin目录下。

所以我们去项目的node_modules/.bin下找到webpack文件，它的首行是这样 #!/usr/bin/env node 意思是用node去执行该文件，所以我们就在这行的后面添加上调试的参数--inspect-brk即可，剩下步骤就和上面讲的调试node一样了。

#!/usr/bin/env node --inspect-brk

下面我们就调一下webpack命令，这里还是require了 webpack-cli

webpack-cli中执行webpack方法的地方

webopack中打断点示意

文中demo: https://github.com/yylgit/lia...

好了，下面就开始你的表演吧，尽情在你想要看的地方进行调试吧。

如果觉得有收获请关注微信公众号 前端良文 每周都会分享前端开发中的干货知识点。