node.js - 在Webpack和Node.js中使用vscode调试器

Question

目前，我正在使用express + node.js和webpack作为捆绑程序的后端应用程序。

到目前为止，我已经能够顺利运行和测试我的代码。

我现在想使用Visual Studio Code调试器来调试我的应用程序。我试图按照本教程https://medium.com/@jsilvax/debugging-webpack-with-vs-code-b14694db4f8e

现在，当我尝试启动调试器时，它只是打印到控制台Webpack is watching the files…而不实际运行服务器

这是我的launch.json文件：

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Webpack",
      "program": "${workspaceFolder}/node_modules/webpack/bin/webpack.js",
      "args": [
         "--config", "./webpack.config.js"
      ],
    }
  ]
}

这是我的 webpack.config.js文件：

const webpack = require('webpack')
const path = require('path')
const nodeExternals = require('webpack-node-externals')
const StartServerPlugin = require('start-server-webpack-plugin')

module.exports = {
  entry: ['webpack/hot/poll?1000', './src/index'],
  watch: true,
  devtool: 'sourcemap',
  target: 'node',
  node: {
    __filename: true,
    __dirname: true
  },
  externals: [nodeExternals({ whitelist: ['webpack/hot/poll?1000'] })],
    module: {
      rules: [
        {
          test: /\.js?$/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                babelrc: false,
                presets: [['env', { modules: false }], 'stage-0'],
                plugins: ['transform-regenerator', 'transform-runtime']
              }
            }
          ],
          exclude: /node_modules/
        },
        {
          test: /\.(graphql|gql)$/,
          exclude: /node_modules/,
          use: {
            loader: 'raw-loader'
          }
        }
      ]
    },
    plugins: [
      new StartServerPlugin('server.js'),
      new webpack.NamedModulesPlugin(),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoEmitOnErrorsPlugin(),
      new webpack.DefinePlugin({
        'process.env': { BUILD_TARGET: JSON.stringify('server') }
      }),
      new webpack.SourceMapDevToolPlugin({
        filename: '[name].js.map'
      }),
      new webpack.BannerPlugin({ banner: 'require("source-map-support").install();', raw: true, entryOnly: false })
    ],
    output: { path: path.join(__dirname, 'dist'), filename: 'server.js' }
};

另外，这是我的项目结构：

要在不使用调试器的情况下运行此应用程序，我有一个启动脚本，如下所示：
"start": "webpack --colors --progress"

就像我说的那样，当我启动调试器时，它只是挂起而没有执行任何操作。我在调试器控制台中收到的唯一消息是 Webpack is watching the files…

Answer 1

我认为您的配置不正确。在“程序”中，从应用程序中选择文件，而不是从Webpack中选择文件，例如“ server.js”或下面的“ index.js”。

        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/index.js"
        }

还有其他问题-VSCode中添加了任何断点吗？如果没有，调试器将无法正常工作。