如何在VS代码中调试webpack-dev- server内置的express server？

Question

我有一个配置文件，在webpack devServer配置和webpack devServer配置中，我定义了一个快速的中间件函数：

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

其中init是表单的函数：

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

如何调试这段webpack-开发-服务器代码？

如果我可以直接在VSCode中调试它，我会更喜欢，但如果需要的话，我很乐意使用浏览器内调试。

Answer 1

事实证明，在VSCode中有一种非常简单的方法来调试webpack开发服务器。只需将可执行文件作为节点文件进行调试！

这是我的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调试器的工具来完成此操作。