关于javascript：如何设置VSCode来调试Webpack捆绑的Node.js服务器


How to setup VSCode to debug a webpack bundled nodejs server

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

  • 前端和后端的Webpack Javascript捆绑(nodejs)
  • 使用Webpack创建服务器包以进行通用渲染

捆绑后，我可以构建和运行服务器，但是我希望能够使用VS Code的调试环境对其进行调试。

我尝试了以下webpack和vscode配置的组合，但是它没有设置断点或让我进入代码。

.vscode / launch.json

1
2
3
4
5
6
7
8
{
   "type":"node",
   "request":"launch",
   "name":"bundle-server.js",
   "program":"${workspaceFolder}\\bundle-server.js",
   "sourceMaps": true,
   "smartStep": true,
}

webpack-server.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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调试Webpack捆绑的节点ts。

相关讨论

在启动配置中，您将提供Webpack的输出文件作为program进行调试。

建立：
您可以改为使用program作为Webpack运行程序的路径。 例如：

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

然后，您应该提供文件作为要与webpack一起运行的参数。 例如：

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

跑步：

对其他程序执行相同的步骤

1
2
3
4
5
6
7
"program":"${workspaceFolder}/node_modules/webpack-dev-server/bin/webpack-dev-server",
"args": [
   "--config",
   "webpack-server.config.js",
   "--hot",
   "--progress"
]
相关讨论

尝试这两种配置。 应该先构建项目，然后通过VSCode自动附加节点检查器。 我刚刚在我的项目中尝试过它，看来效果很好。

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

launch.json

1
2
3
4
5
6
7
8
9
10
11
12
{
 "version":"0.2.0",
 "configurations": [
    {
     "type":"node",
     "request":"launch",
     "name":"Debug Server",
     "program":"${workspaceFolder}\\bundle-server.js",
     "preLaunchTask":"build"
    }
  ]
}

tasks.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
    // 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": [

        ]
      }
    ]
}
相关讨论