Reagire debug nel browser quando si utilizza bundle.js

Question

Strumenti: Chrome Developer Tools, ReactJs e Webpack

Forse è stato quando sono passato a bundling con webpack, ma inizialmente quando ho iniziato il mio progetto sono stato in grado di riunire i miei js in un file bundle.js ma hanno ancora accesso ai file nello strumento di debug del browser. Ora tutto quello che vedo nel browser nella mia cartella js è bundle.js

Utilizzo di webpack come faccio a tornare a vedere tutti i miei file Javascript nel debugger del browser in modo da poter fare cose come inserire punti di interruzione?

Answer 1

Dopo un lungo periodo di inutili utilizzo di una serie di dichiarazioni di stampa, sono finalmente tornato indietro e ho capito come farlo.

Ecco come si ottiene la possibilità di utilizzare di nuovo i punti di interruzione dopo aver bundle:

1)

Vai al file webpack.config.js e impostare devtools da "true" a "source-map" o una delle altre opzioni che @MichelleTilley ha spiegato nella sua risposta.

webpack.config.js (ecco un esempio)

module.exports = { 
    entry: "./js/app.js", 
    output: { 
    filename: "js/bundle.js" 
    }, 
    debug: true, 
    devtool: "#eval-source-map", 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel' 
     } 
    ] 
    } 
}; 

2)

anche come @MichelleTilley spiegato nella sua risposta che potrebbe essere necessario attivare le opzioni DevTools in Chrome.

3)

Dopo questo il quando si va a eseguire il debug si dovrà cercare una nuova cartella appena nominato "" è molto difficile da notare!

Grazie alla risposta Stackoverflow di seguito con le immagini pubblicate ho finalmente trovato dove si trovava quella cartella.

Configure webpack to allow browser debugging

Answer 2

È possibile utilizzare the devtool option avere webpack generare mappe di origine, che (when enabled in the Chrome devtools options) permetterà Chrome per tradurre il codice bundle.js (che può anche essere ridotte di) nel codice sorgente originale.

Per lo sviluppo, ho impostato questa opzione su eval-source-map o cheap-eval-source-map, e per la produzione I lo lascio libero oppure genera file di mappe sorgente separati con source-map.