Skonfiguruj pakiet internetowy, aby umożliwić debugowanie przeglądarki

Question 1

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.

Question 2

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ę.

Question 3

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'

Question 4

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ń.

Question 5

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.

Question 6

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.

wprowadź opis obrazu tutaj