使用vscode调试webpack

发表于 | 分类于 |

作为一个前端工程师，在现代化的前端开发中一定会接触到 webpack。这里就简单记录一下 webpack 的调试方式。

使用命令行的形式

1
node --inspect-brk ./node_modules/webpack/bin/webpack.js --inline --progress

–inspect-brk 就是以调试模式启动 node
–inline 是 webpack-dev-server 将以内联模式的情况下为应用程序提供服务。
–progress 是 webpack-dev-serve 将运行进度输出到控制台

比较有趣的是，vue-cli 集成了 webpack，我们就不能单纯的使用上面的命令来调试 vue-cli 生成的项目了。通过对 vue-cli 的 package.json 进行解读，发现 vue-cli 项目使用的是 vue-cli-service 这个可执行命令，所以我们变通一下，将命令修改为：

1
node --inspect-brk ./node_modules/.bin/vue-cli-service serve --inline --progress

成功了，控制台输出以下内容：

1
2
3
Debugger listening on ws://127.0.0.1:9229/e9171d1c-53ef-42c1-8a5b-f775a2c29cc4
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.

打开 Chrome 浏览器，地址栏里输入 chrome://inspect/#devices：
202101251031.png

点击 Open dedicated DevTools for Node，就打开了浏览器控制台，我们可以发现调试的内容就是我们的 webpack 代码。下一步，我们就调试 node 程序了。

使用 vscode

相对前面的方式，vscode 简直不要太舒服。我们直接使用 vscode 的运行菜单，打开运行面板，如果没有 launch.json 文件，我们就点击创建 launch.json 文件，选择 node 模板。

删除 configurations 中的 skipFiles 和 program 字段，并添加以下内容：

1
2
3
"runtimeExecutable": "npm",
"runtimeArgs": ["run", "serve"],
"port": 5858

最终得到的内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
{
	"version": "0.2.0",
	"configurations": [
		{
			"type": "node",
			"request": "launch",
			"name": "vue webpack 调试",
			"runtimeExecutable": "npm",
			"runtimeArgs": ["run", "serve"],
			"port": 5858
		}
	]
}

当然了，聪明如你，已经发现了 runtimeArgs 字段就是我们在终端输入的命令，所以也可以换成其他的命令进行调试。

开始调试你的 webpack 吧，少年！

[越努力，越幸运！]