Jak skutecznie debugować aplikacje webpack?

Question

Próbuję przyjąć serwer dewelopera WebPack w moim projekcie. Wiem, że jest dość powszechnie przyjęta, więc zaskoczyło mnie to, że debugowanie aplikacji wydaje się dość trudne. Ponieważ domyślnie pakiet internetowy tworzy jeden gigantyczny pakiet, mapy źródłowe są koniecznością. Mam duży problem z nimi

zależności od trybu devtool mapy źródłowe są albo powolne do analizowania (eval) lub nie używane do mapowania ślady stosu (eval-source-map), np Są chwile cały ślad stosu wygląda następująco :
at eval (eval at <anonymous> http://localhost:8082/js/app.js:2004:2), <anonymous>:43:67).
Ponadto, gdy ręcznie wywołasz console.trace lub console.error, dane wyjściowe nie są odwzorowane. Więc musisz użyć narzędzi takich jak sourcemapped-stacktrace - jest to powolne i podatne na błędy.

Obecnie używam require.js do programowania, ponieważ pozwala mi to bardzo łatwo debugować aplikację - każdy ślad stosu wskazuje właściwy plik i linię.

Jak osiągnąć ten sam wynik z pakietem internetowym?

EDIT:
pokrewne problem w google chrome: https://code.google.com/p/chromium/issues/detail?id=376409

Powiązane problem Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=583083

Answer 1

Które DevTools używacie? Millage może się różnić, ale Chrome (i IE/Edge, yes ... IE and Edge) najlepiej radzą sobie z sourcemaps. Podczas gdy w tym momencie obsługują je wszystkie główne przeglądarki, mam gorsze doświadczenia z Firefoksem.

Mamy bardzo duże pakiety, a produkty typu "sourcemaps" nie spowodowały spowolnienia w devtools. Z jakiego trybu korzystasz? W przypadku pakietu internetowego użycie "eval" spowoduje wstawienie pliku mapy, który nie mapuje plików, ale nie źródłowy (widać wygenerowany kod, ale korelacja 1: 1 z oryginalnymi plikami). Ponieważ wiele konstrukcji ES6, Maszynopis i Coffeescript nie mapuje się dobrze (np. Generatory lub interpretacje), jest to zwykle najłatwiejszy w użyciu tryb, a także najszybszy. Korzystanie z eval również oznacza, że ​​"po prostu działa" w Chrome, bez żadnych działań ze strony programisty (twoje pliki będą znajdować się w pakiecie internetowym: // pseudo-folderze)

Dla śledzenia stosu, nie wiem, czy to przeglądarka konkretne lub co. Używamy Mocha do testu jednostkowego, który nie wygląda na to, że robi coś specjalnego dla sourcemaps, i przechwytuje ślady stosu, aby poprawnie je renderować na pakiecie testowym (zawiera nawet prefiks webpack: // wraz z oryginalną nazwą pliku i właściwy numer linii), więc może potrzeba tej biblioteki jest specyficzna dla przeglądarki lub przestarzała?

Answer 2

znalazłem, że warto dodać, że zadanie npm run watch startuje WebPACK tak:

webpack -w --devtool eval

Powoduje to źródło map, które mają co najmniej poprawną nazwę modułu. Jest to nieco mylące, ponieważ źródło zmapowane źródła jest przed przetwarzaniem (babel)? Więc można zobaczyć w czymś source jak:

import react from 'react';

Ale rzeczywista nazwa zmiennej zostanie munged do czegoś podobnego _react2 lub podobnym. Chciałbym, aby zmapowane źródło było przetworzoną wersją z brzydkimi nazwami zmiennych lub aby zakres miał definicje widziane w zmapowanym źródle.

Rzeczywista linia mam w package.json dla powyższego zadania jest:

"scripts": { 
    // other lines edited out 
    "watch": "node ./node_modules/webpack/bin/webpack.js -w --devtool eval" 
    }