Использование отладчика vscode с webpack и node.js

Question

В настоящее время я работаю над бэкэнд-приложением, использующим в качестве компоновщика express + node.js и веб-пакет.

До сих пор я мог без проблем запускать и тестировать свой код.

Теперь я хотел бы использовать отладчик кода Visual Studio для отладки моего приложения.Я пытался следовать этому уроку https://medium.com/@jsilvax/debugging-webpack-with-vs-code-b14694db4f8e

Теперь, когда я пытаюсь запустить мой отладчик, он просто печатает на консоль Webpack is watching the files… без фактического запуска моего сервера

Вот мой launch.json file:

{
  // 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 file:

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

Я думаю, что ваша конфигурация неверна.В «программе» выберите файл из своего приложения, а не из веб-пакета, например, «server.js» или, как показано ниже, «index.js».

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

Может быть и другая проблема - есть ли у вас какие-либо точки останова, добавленные в VSCode?Если нет, то отладчик просто не работает.