如何使用 webpack 调试节点阿波罗服务器答案

【问题标题】：how to debug node apollo server with webpack如何使用 webpack 调试节点阿波罗服务器
【发布时间】：2018-11-19 13:00:12
【问题描述】：

我正在尝试调试一个 express apollo 服务器应用程序，但我正在努力找出问题所在。我有一个启用了源映射并将加载器选项调试设置为 true 的 web 包构建。

我的 npm 脚本将我的 webpack 构建和一个 url 输出到调试器

"debug": "node --inspect ./node_modules/.bin/webpack --config ./webpack.dev.js"

我通过chrome://inspect 进入调试器，我可以查看我的代码，但是当我通过http://localhost:8080/graphiql 发送请求时，调试器内没有任何反应，并且请求正常通过。

这是我的 webpack 配置

const webpack = require("webpack");
const path = require("path");
const nodeExternals = require("webpack-node-externals");
const StartServerPlugin = require("start-server-webpack-plugin");
module.exports = {
  entry: ["./server.js"],
  watch: true,
  mode: "development",
  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/
      }
    ]
  },
  plugins: [
    new StartServerPlugin("server.js"),
    new webpack.NamedModulesPlugin(),
    new webpack.LoaderOptionsPlugin({
      debug: true
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.SourceMapDevToolPlugin({
      filename: '[name].js.map'
    }),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.DefinePlugin({
      "process.env": { BUILD_TARGET: JSON.stringify("server") }
    })
  ],
  output: { path: path.join(__dirname, "dist"), filename: "server.js" }
};

我的问题是我需要通过任何额外的箍来使其与 graphql 服务器一起工作我是否正确设置了源映射？

感谢任何帮助。

【问题讨论】：

标签： javascript node.js debugging webpack apollo-server

【解决方案1】：

我通过拥有一个节点进程并使用 nodemon 在 parrell 中同时运行 webpack 配置来解决此问题

https://github.com/remy/nodemon
https://www.npmjs.com/package/concurrently

"debug": "concurrently \"webpack --config ./webpack.dev.js\" \"nodemon --inspect=9229 ./dist/server.js\""

我还添加了 devtool: 'eval-source-map' 我的 webpack 配置以启用源映射。

我还从 webpack 配置中删除了启动服务器插件，以本质上只构建 webpack 并提供 nodemon 服务。

【讨论】：