jsx tepki hata ayıklayıcı webpack'e rağmen eşleşmiyor kaynak haritaları

Question

React ve JSX'i öğreniyorum ve derlemek için webpack'i kullanıyorum ancak bileşenime 'debugger' a bastığımda Chrome Dev Tools'dayken hat eşleşmiyor 'Kaynaklar sekmesi (genel olarak kaynaklar, benim app.jsx dosyamda sahip olduğum her şeyi yansıtmıyor). React sekmesi de gerçekten yüklenmez.

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 ekran görüntüsü

yerel dosyadan html yüklüyorsanız

Answer 1

değil webpack sunucusu: Aşağıda benim webpack.config olduğunu , "Geliştirici URL'sine erişime izin ver" seçeneği olan React Developer Tools uzantısı seçeneğini etkinleştirmeniz gerekir.