React debugowanie w przeglądarce przy użyciu bundle.js

Question

Narzędzia: Chrome Developer Tools, ReactJs i WebPACK

Może to było, kiedy przełączony na łączenie z WebPack, ale początkowo, kiedy zacząłem mój projekt udało mi się pakiet moje js do pliku bundle.js, ale nadal mają dostęp do plików w narzędziu debugowania przeglądarki. Teraz wszystko, co widzę w przeglądarce w moim folderze js to bundle.js

Korzystanie z pakietu internetowego, jak mogę powrócić do możliwości zobaczenia wszystkich moich plików JavaScript w debugerze przeglądarki, więc mogę zrobić rzeczy takie jak wstawianie punktów przerwania?

Answer 1

Po długim czasie bezsensownego używania kilku wydruków, w końcu wróciłem i zorientowałem się, jak to zrobić.

Oto jak masz możliwość ponownego użycia po punkty przerwania wiązki:

1)

przejdź do pliku webpack.config.js i ustawić DevTools z „true” "mapa źródłowa" lub jedna z innych opcji, które @MichelleTilley wyjaśniła w swojej odpowiedzi.

webpack.config.js (tutaj jest przykład)

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)

także jak @MichelleTilley wyjaśnione w jej odpowiedź może trzeba włączyć opcje DevTools w Chrome.

3)

Po tym, gdy idziesz do debugowania trzeba będzie szukać nowego folderu o nazwie po prostu „” to jest bardzo trudne do zauważenia!

Dzięki odpowiedzi Stackoverflow poniżej z zamieszczonymi obrazkami w końcu znalazłem miejsce, w którym znajdował się ten folder.

Configure webpack to allow browser debugging

Answer 2

Możesz użyć the devtool option, aby mieć Webpack generować mapy źródłowe, które (when enabled in the Chrome devtools options) pozwolą Chrome przetłumaczyć kod w bundle.js (który może nawet zostać minified) na oryginalny kod źródłowy.

Dla rozwoju, ustawiam tę opcję na eval-source-map lub cheap-eval-source-map, a do produkcji pozostawiam to wyłączone lub generuję oddzielne pliki map źródłowych z source-map.