Question

我在webpack devServer配置中有一个配置文件使用webpack devServer配置，我已经定义了一个快速中间件功能：

devServer: {
    before(app){
        init(app);
    },
    ...
}

其中init是表格的函数：

init(app){
    app.get('/endpoint', (req,res,next)=> {...;debugger; next();});
    ...
}

如何调试此webpack-dev服务器代码？

我更愿意，如果我可以直接在VSCode中调试它，但我很乐意在必要时使用浏览器内调试。

Answer 1

事实证明，在VSCode中调试webpack-dev-server有一种非常简单的方法。只需将可执行文件作为节点文件进行调试即可！

这是我的launch.json：

    {
        "type": "node",
        "request": "launch",
        "name":"launch webpack-dev-server",
        "program": "${workspaceFolder}/node_modules/webpack-dev-server/bin/webpack-dev-server.js",
        "args": ["--progress", "--inline", "--config", "build/webpack.dev.conf.js"]
    },

（对于复制此文件的任何人，您必须将webpack配置文件路径arg更改为您计算机上的任何内容。）

值得注意的是，您可以用完全相同的方式调试webpack构建脚本：

    {
        "type": "node",
        "request": "launch",
        "name":"launch webpack",
        "program": "${workspaceFolder}/node_modules/webpack/bin/webpack.js",
        "args": ["--progress", "--config", "build/webpack.prod.conf.js"]
    },

注意：这会调试构建/服务器本身。如果要调试输出文件，还需要将调试器附加到URL。你可以使用chrome调试器之类的东西来做到这一点。

如何在VS代码中调试webpack-dev-server的内置快速服务器？

1 个答案: