javascript - 如何设置 VSCode 来调试 webpack 捆绑的 nodejs 服务器

Question

我有一个 nodejs 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 进行调试吗？我希望能够跨过原始源文件，这样我就可以有一个快速的调试-编辑-重新运行循环。

---

似乎与此相关:Debug webpack bundled node ts with Visual Studio Code .

Answer 1

在您的启动配置中，您提供 webpack 的输出文件作为要调试的程序。

构建:您可以改为使用 program 作为您的 webpack runner 的路径。例如:

"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"
]