如何在 VSCode 中调试 NestJS 的 webpack HMR

Question

我正在尝试调试NestJS应用程序，该应用程序具有在官方文档中描述的webpack HMR设置

这是我的VSCode launch.json文件：

    {
      "name": "Attach",
      "request": "attach",
      "type": "node",
      "restart": true,
      "sourceMaps": true,
      "internalConsoleOptions": "neverOpen",
      "localRoot": "${workspaceFolder}/dist",
      "skipFiles": [
        // Ignore node_modules folder when debugging.
        "${workspaceFolder}/node_modules/**/*.js",
        // Ignore NodeJS when debugging.
        "<node_internals>/**/*.js"
      ],
      "outFiles": ["${workspaceFolder}/dist/**/**.js"],
      "autoAttachChildProcesses": true
    }

这里是webpack-hmt.config.json文件。

const nodeExternals = require('webpack-node-externals');
const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin');

module.exports = function (options, webpack) {
  return {
    ...options,
    devtool: 'inline-source-map',
    entry: ['webpack/hot/poll?100', options.entry],
    externals: [
      nodeExternals({
        allowlist: ['webpack/hot/poll?100'],
      }),
    ],
    plugins: [
      ...options.plugins,
      new webpack.HotModuleReplacementPlugin(),
      new webpack.WatchIgnorePlugin({
        paths: [/\.js$/, /\.d\.ts$/],
      }),
      new RunScriptWebpackPlugin({
        name: options.output.filename,
        nodeArgs: ['--inspect=0.0.0.0:9229'],
      }),
    ],
  };
};

遗憾的是，当我运行调试器并在控制器中设置断点时，它们没有被触发。

- Aren Hovsepyan

---

想知道你是否有进展或找到了解决方案...提前感谢。 - Pietro Gobbato

我刚刚摆脱了HMR。实际上，没有必要使用它。没有它，如果你需要进一步的帮助，请联系我，我可以轻松地让调试器工作。 - Aren Hovsepyan

Answer 1

答案在这里：https://github.com/nestjs/nest-cli/issues/612 简而言之，在webpack-hmr.config.js中，添加devtool: "inline-source-map"，并将nodeArgs: ["--inspect=0.0.0.0:9229"]添加到传递给RunScriptWebpackPlugin的属性中。

整个webpack-hmr.config.js内容如下：

const nodeExternals = require("webpack-node-externals");
const { RunScriptWebpackPlugin } = require("run-script-webpack-plugin");

module.exports = function (options, webpack) {
  return {
    ...options,
    entry: ["webpack/hot/poll?100", options.entry],
    devtool: "inline-source-map",
    externals: [
      nodeExternals({
        allowlist: ["webpack/hot/poll?100"],
      }),
    ],
    plugins: [
      ...options.plugins,
      new webpack.HotModuleReplacementPlugin(),
      new webpack.WatchIgnorePlugin({
        paths: [/\.js$/, /\.d\.ts$/],
      }),
      new RunScriptWebpackPlugin({
        name: options.output.filename,
        autoRestart: false,
        nodeArgs: ["--inspect=0.0.0.0:9229"],
      }),
    ],
  };
};

然后使用此启动配置启动：

    {
      "name": "Launch via NPM",
      "request": "launch",
      "runtimeArgs": ["run", "start:dev"],
      "runtimeExecutable": "npm",
      "skipFiles": ["<node_internals>/**"],
      "type": "node"
    }

- stevex