debugging - 尽管 webpack 源映射，jsx React 调试器仍不匹配

Question

我正在学习 React 和 JSX 并使用 webpack 进行编译，但是当我将“调试器”放入我的组件中时，当我在 Chrome 开发工具的“源”选项卡中时，该行不匹配(通常源不匹配)根本不反射(reflect)我的 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”。