VSCode 调试 webpack

如果想自己写一个webpack的loader或者plugins，首先我们需要在VSCode中调试webpack代码。那么这个时候我们需要对VSCode做一些配置。

准备调试用例

配置package.json

通常正常的配置

"scripts": {    
    "build": "webpack --config webpack.config.js"  
}

但是如果需要再VSCode中就需要下面的配置

  "scripts": {
    "build": "node --inspect-brk=5000 ./node_modules/webpack/bin/webpack --config webpack.config.js"
  }

node --inspect-brl=5000 配置debug端口为5000

webpack替换成 ./node_modules/webpack/bin/webpack

不能替换成./node_modules/.bin/webpack,会报错

这是因为.bin文件执行shell脚本，在webpack配置中使用非javascript脚本就会报错。

VSCode lanch.json脚本配置

.vscode/launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "webpack debugger",
            "runtimeExecutable": "yarn",
            "runtimeArgs": [
                "run",
                "build"
            ],
            "port": 5000
        }
    ]
}

重要参数：

runtimeExecutable: 程序执行器，默认是node，这里我们是用yarn启动，就需要设置成"yarn"

runtimeArgs:传递给程序执行器的参数。比如我们是yarn run build，参数就是run 和 build

port: node调试端口号，和刚才package.json script中配的--inspect-brk保持一致

启动调试

点击debug的按钮启动调试。