一、调试webpack配置文件

launch.json的配置如下，在webpack.dev.config.js文件中设置断点，开始调试。

{    "version": "0.2.0",    "configurations": [        {            "type": "node",            "request": "attach",            "name": "附加到端口",            "address": "localhost",            "port": 5858        },        {            "type": "node",            "request": "launch",            "name": "启动程序",            "program": "${workspaceFolder}/build/webpack.dev.config.js"        }    ]}

二、调试根文件或者jsx文件

1、launch.json的配置如下。

{    "version": "0.2.0",    "configurations": [        {            "type": "chrome",            "request": "launch",            "name": "启动一个独立的chrome",            "url": "http://localhost:8080",            "webRoot": "${workspaceRoot}"        },        {            "type": "chrome",            "request": "attach",            "name": "监听一个已经启动调试模式的chrome",            "port": 9222,            "url": "http://localhost:8080",            "webRoot": "${workspaceRoot}"        }    ]}

如果要调试源码（不是编译后的代码），需要加"sourceMaps": true。

2、先启动项目

npm run dev

3、在main.js文件或jsx文件中设置断点，启动调试。