jsx webpackのソースマップにもかかわらず、一致するデバッガがありません

Question

私はReactとJSXを学習してwebpackを使用してコンパイルしていますが、私のコンポーネントに 'デバッガ'を入れたとき、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"] 
    } 
}; 

// WebPACKのスクリーンショット

Answer 1

ローカルファイルではなくWebPACKのサーバーからあなたのhtmlをロードする場合React Developer Tools拡張オプション「ファイルURLへのアクセスを許可する」を有効にする必要があります。