Jestem nowym użytkownikiem pakietu webpack i konwertuję istniejącą aplikację internetową, aby z niej korzystać.
Używam pakietu webpack do pakowania i minimalizowania mojego JS, który jest świetny po wdrożeniu, jednak sprawia to, że debugowanie podczas programowania jest bardzo trudne.
Zazwyczaj używam wbudowanego debuggera Chrome'a do debugowania problemów z JS. (Lub Firebug w przeglądarce Firefox). Jednak w przypadku pakietu webpack wszystko jest upchane w jednym pliku i debugowanie przy użyciu tego mechanizmu staje się trudne.
Czy istnieje sposób, aby szybko włączyć i wyłączyć pakietowanie? lub włączać i wyłączać minifikację?
Sprawdziłem, czy jest jakaś konfiguracja programu ładującego skrypt lub inne ustawienie, ale nie wydaje się to jawne.
Nie miałem jeszcze czasu na przekonwertowanie wszystkiego, aby działało jak moduł i wymaga użycia. Więc po prostu używam wzorca require ("skrypt! ./ plik.js") do mojego ładowania.
źródło
Odpowiedzi:
Możesz użyć map źródłowych, aby zachować mapowanie między kodem źródłowym a pakietem / zminimalizowanym.
Pakiet Webpack udostępnia opcję devtool , która usprawnia debugowanie w narzędziu programistycznym, po prostu tworząc mapę źródłową dołączonego pliku. Tej opcji można użyć z wiersza poleceń lub w pliku konfiguracyjnym webpack.config.js .
Poniżej znajduje się wymyślony przykład użycia wiersza poleceń do wygenerowania pliku pakietu ( bundle.js ) wraz z wygenerowanym plikiem mapy źródłowej ( bundle.js.map ).
$ webpack --devtool source-map ./entry.js bundle.js Hash: b13b8d9e3292806f8563 Version: webpack 1.12.2 Time: 90ms Asset Size Chunks Chunk Names bundle.js 1.74 kB 0 [emitted] main bundle.js.map 1.89 kB 0 [emitted] main [0] ./entry.js 85 bytes {0} [built] [1] ./hello.js 59 bytes {0} [built]index.html
<html> <head> <meta charset="utf-8"> </head> <body> <script src="bundle.js"></script> </body> </html>entry.js
var hello = require('./hello.js'); document.body.innerHTML += 'It works ' + hello();hello.js
module.exports = function () { return 'Hello world!'; };Jeśli otworzysz index.html w swojej przeglądarce (ja używam Chrome, ale myślę, że jest również obsługiwana w innych przeglądarkach), zobaczysz w zakładce Źródła , że masz dołączony plik pod schematem file: // a pliki źródłowe pod specjalny schemat webpack: // .
I tak, możesz rozpocząć debugowanie tak, jakbyś miał oryginalny kod źródłowy! Spróbuj umieścić punkt przerwania w jednej linii i odświeżyć stronę.
źródło
Myślę, że lepiej jest skonfigurować projekt w trybie produkcyjnym i programistycznym https://webpack.js.org/guides/production/ Obejmuje również sposób mapowania kodu do debugowania
devtool: 'inline-source-map'źródło
Mapy źródłowe są bardzo przydatne, jak już wspomniano.
Czasami jednak wybór mapy źródłowej może być uciążliwy.
Ten komentarz dotyczący jednego z problemów z mapą źródłową pakietu Webpack może być pomocny przy wyborze mapy źródłowej do użycia na podstawie wymagań.
źródło
Chrome ma również opcję formatowania w debugerze. Nie zawiera wszystkich informacji, które miałby normalny plik źródłowy, ale to świetny początek, możesz również ustawić punkty przerwania. Kliknięty przycisk znajduje się w lewym dolnym rogu pierwszego zrzutu ekranu, wygląda jak {}.
Przed formatowaniem:
Po sformatowaniu.
źródło
Zajrzyj tutaj
to upiększacz, który osłabia javascript. na dole znajduje się lista różnych wtyczek i rozszerzeń do przeglądarek, sprawdź je.
możesz być zainteresowany Deminifikatorem FireFox , jego zadaniem jest deminifikacja i stylizacja twojego javascript, gdy jest pobierany z serwera.
źródło