如何设置VSCode以调试打包后的Node.js服务器（使用webpack）

Question

我有一个使用 Node.js Express 应用程序，尝试使用 webpack 4（加上 babel 7.1.0）打包。我已经按照以下两篇文章中的一些设置进行了操作：

• Webpack Javascript Bundling for Both Front-end and Back-end (nodejs)
• Creating a server bundle with Webpack for universal rendering

在打包后，我可以构建和运行服务器，但我想使用 VS Code 的调试环境来进行调试。

我尝试了以下 webpack 和 vscode 配置的组合，但它不会设置断点或让我步入代码。

.vscode/launch.json

{
    "type": "node",
    "request": "launch",
    "name": "bundle-server.js",
    "program": "${workspaceFolder}\\bundle-server.js",
    "sourceMaps": true,
    "smartStep": true,
}

webpack-server.config.js

const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
    target: "node",
    entry: "./server.js",
    output: {
        path: path.resolve(__dirname, "./"),
        filename: "bundle-server.js",
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                loader: "babel-loader"
            }
        ],
    },
    externals: [nodeExternals()],
    devtool: 'inline-source-map',
};

我错过了什么？直接从VSCode调试是否可行？我想能够跨过原始源文件，以便我可以快速地进行调试-编辑-重新运行循环。

---

似乎与此有关：使用Visual Studio Code调试打包的Node.js和TypeScript代码。

- m0tive

---

在 Node 进程已经运行之后，附加到它可能会更容易。有关详细信息，请参阅 https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_attaching-to-nodejs。 - Ryan

Answer 1

在您的启动配置中，您提供了webpack的输出文件作为调试的program。 构建： 相反，您可以将program用作指向webpack运行器的路径。例如：

"program": "${workspaceFolder}/node_modules/webpack/bin/webpack.js" // Or CLI

然后您需要将要使用 webpack 运行的文件作为参数提供。例如：

"args": [
   "--config", "./some/dir/webpack.config.js"
]

运行：

使用不同的程序按照相同的步骤进行操作。

"program": "${workspaceFolder}/node_modules/webpack-dev-server/bin/webpack-dev-server",
"args": [
    "--config",
    "webpack-server.config.js",
    "--hot",
    "--progress"
]

- Navjot Ahuja

---

这只是构建捆绑包，而不是执行它。我想在构建后运行捆绑包并逐步执行代码（使用原始文件）。是否有一些额外的配置可以使此构建并运行捆绑包？ - m0tive

你也可以修改程序。已编辑答案。 - Navjot Ahuja

这仍然没有回答我的问题，我正在使用webpack来捆绑Express服务器，而不是捆绑客户端应用程序（尽管我也在同时进行）。我想要能够调试Express服务器。 - m0tive

Answer 2

尝试这两个配置。首先构建项目，然后通过VSCode自动连接节点检查器。我刚刚在我的项目上尝试过，似乎工作得很好。

我正在做与你相同的事情 - 使用Webpack和Babel构建项目

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Server",
      "program": "${workspaceFolder}\\bundle-server.js",
      "preLaunchTask": "build"
    }
  ]
}

tasks.json

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
      {
        "label": "build",
        "type": "npm",
        "script": "build",
        "problemMatcher": [

        ]
      }
    ]
}

- prestonsmith

---

VSCode 告诉我在 launch.json 中 "inspector" 不是一个允许的属性。 - Matt

我要完全改变我的答案，实际上@MegaMatt - 这是为另一个正在进行服务器端渲染的项目。 - prestonsmith