尽管webpack源映射，jsx反应调试器不匹配

Question

我正在学习React和JSX，并使用webpack进行编译，但是当我进入＆＃39; debugger＆＃39;在我的组件中，当我在Chrome开发工具中使用该行时，该行不匹配＆＃39;来源标签（一般情况下，来源并不反映我在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"]
  }
};

// Webpack截图

Answer 1

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