198 字
1 分钟
自定义loader记录

调试loader#

1. 准备好自己的webpack和loader#

这里我用的项目是我自己的

webpack template

2. vscode配置debug配置文件#

按照这个步骤配置完会生成一个.vscode文件夹下面有个launch.json文件

img

然后替换它

{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Webpack Debug",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run",
"debug"
],
"port": 5858
}
]
}

利用以上配置信息,我们创建了一个 Webpack Debug 的调试任务。当运行该任务的时候,会在当前工作目录下执行 npm run debug 命令。因此,接下来我们需要在 package.json 文件中增加 debug 命令,具体内容如下所示:

{
"scripts": {
"debug": "webpack --config build/webpack.dev.js"
}
}

3. 把自定义loader写道自己的rule里头#

image-20211010161220568

然后打断点

image-20211010161333822

4.启动调试#

image-20211010161437329

自定义loader记录
https://nollieleo.github.io/posts/自定义loader记录/
作者
翁先森
发布于
2021-10-10
许可协议
CC BY-NC-SA 4.0