Błąd rejestrowania konsoli w bundle.js zamiast w komponencie React

Question

Stworzyłem kompilację Webpacka, która działa dobrze dla mnie - ma serwer dev, który używam do szybkiego ponownego ładowania, oraz serwer ekspresowy produkcji, który uruchamia szablon html plik i integruje plik bundle.js.

To wszystko jest super, z wyjątkiem kiedy pracuję w moim dev-serwer, konsola daje mi komunikaty o błędach tak:

Uncaught Error: Expected the reducer to be a function.(…) bundle.js:36329

odwołuje bundle.js jako źródła błędów, a nie komponent, nad którym pracuję, co bardzo utrudnia odnalezienie źródła błędu.

Wiem, o ile konsola jest świadoma, że ​​plik bundle.js zawiera błąd, ale w jaki sposób można uzyskać, aby konsola rejestrowała kod pakietu wstępnego? (na przykład Component.js)

Z góry dziękuję.

Answer 1

Powinieneś włączyć mapowanie źródłowe, aby uzyskać doskonałe wrażenia debugowania. Mapa źródłowa połączy twój pakiet z własnym kodem, więc gdy wystąpi błąd, komunikat o błędzie wyświetli numer linii twojego pliku, a nie pakietu. Przez domyślne źródło mapie są wyłączone z WebPack i można włączyć z właściwością „devtool” jak ten:

// webpack.config.js 
module.exports = { 
    ... 
    devtool: '#eval-source-map', 
    ... 
}; 

Oto link do oficjalnej dokumentacji: https://webpack.github.io/docs/configuration.html#devtool