如何在 VS 代碼中調試 webpack-dev-server 的內置 express 服務器？

Question

我有一個配置文件，在 webpack devServer 配置中使用 webpack devServer 配置，我定義了一個快速中間件函數：

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

其中 init 是以下形式的函數：

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

如何調試這個 webpack-dev-server 代碼？

如果我可以直接在 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 調試器之類的東西來做到這一點。