Как настроить VSCode для отладки связанного сервера webjpack nodejs

Question

У меня есть приложение nodejs express, которое я пытаюсь связать с webpack 4 (плюс babel 7.1.0). Я следовал за некоторыми настройками из этих двух статей:

• Объединение Javascript в Webpack для внешнего и внутреннего (nodejs)
• Создание комплекта сервера с Webpack для универсального рендеринга

Я могу собрать и запустить сервер в комплекте, но я бы хотел отлаживать его с помощью среды отладки 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.

---

Похоже, с этим связано: Отладка связанных узлов веб-пакетов с помощью кода Visual Studio .

Answer 1

Попробуйте эти две конфигурации. Следует сначала построить проект, а затем автоматически подключить инспектор узлов через 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": [

        ]
      }
    ]
}

Answer 2

В ваших конфигурациях запуска вы предоставляете выходной файл веб-пакета как program для отладки.

Для сборки: Вместо этого вы можете использовать program в качестве пути к вашему раннеру. Пример:

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

И затем вы должны предоставить файл в качестве аргумента, который вы хотите запустить с веб-пакетом. Пример:

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