jsx reaceag debugger non corrispondente nonostante le mappe sorgente di webpack

Question

Sto imparando React e JSX e uso il webpack per compilare, ma quando inserisco "debugger" nel mio componente, la riga non viene trovata quando sono in Chrome Dev Tools 'Scheda Sorgenti (in generale le fonti non riflettono affatto ciò che ho nel mio file app.jsx). La scheda React non si carica davvero. Qui di seguito è il mio 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 screenshot

Answer 1

Se si sta caricando il codice HTML da file locale e non del server webpack , è necessario abilitare l'opzione di estensione Strumenti di sviluppo di React "Consenti l'accesso agli URL dei file".