如何在VS Code中调试webpack-dev-server内置的express服务器？

Question

我有一个配置文件，其中包含webpack devServer配置。在webpack devServer配置中，我定义了一个express中间件函数：

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

其中init是以下形式的一个函数：

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

我该如何调试这段webpack-dev-server代码？

如果可以的话，我更喜欢在VSCode中直接进行调试，但是如果必要的话，我也可以使用浏览器中的调试工具。

- keithlee96

Answer 1

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

这是我的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配置文件路径参数更改为你机器上的路径。

您可以以完全相同的方式调试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调试器的工具来实现。

- keithlee96