关于javascript:如何调试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…

好了，上面就开始你的表演吧，纵情在你想要看的中央进行调试吧。

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