Debugging jsx react调试器不匹配，尽管有Web包源映射

我正在学习React和JSX，并使用webpack进行编译，但当我在组件中加入“debugger”时，当我在Chrome Dev Tools的“Sources”选项卡中时，这行代码并不匹配（一般来说，这些源代码根本不反映我在app.JSX文件中的内容）。React选项卡也没有真正加载。下面是我的webpack.config：

module.exports = {
  context: __dirname,
  entry: "./api_assignment.jsx",
  output: {
    path: "./",
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['react']
        }
      }
    ]
  },
  devtool: 'source-map',
  resolve: {
    extensions: ["", ".js", ".jsx"]
  }
};

//网页包截图

---

如果您是从本地文件而不是网页包服务器加载html，则需要启用React Developer Tools扩展选项“允许访问文件URL”。

我这样做了，但我也在使用网页包服务器。React选项卡有时会加载，但是有没有办法使sources选项卡的行与我在jsx文件中看到的同步？你能发布屏幕截图吗？很抱歉回复太晚，我已经发布了屏幕截图。正如你所看到的，chrome开发工具说我的问题在第55行，但那里没有视图变量。“我的编辑器”的第一个变量视图位于第112行。请在文件夹webpack://？@Shiroo中发布一个屏幕截图，刚刚用屏幕截图更新。您是否尝试了其他webpack源地图选项<代码>评估对我有效