Question

我有一个nodejs express应用程序，我正在尝试将其与webpack 4（以及babel 7.1.0）捆绑在一起。我遵循了这两篇文章中的一些设置：

捆绑后，我可以构建并运行服务器，但是我希望能够使用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-edit-rerun循环。

与此相关的似乎：Debug webpack bundled node ts with Visual Studio Code。

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

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": [

        ]
      }
    ]
}

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

2 个答案:

`launch.json`

`tasks.json`