Come eseguire il debug in modo efficiente delle applicazioni Webpack?

Question

Sto provando ad adottare server webpack dev nel mio progetto. So che è ampiamente adottato, quindi mi ha sorpreso il fatto che il debug dell'applicazione sembra essere piuttosto difficile. Poiché per impostazione predefinita Webpack produce un unico pacchetto gigante, le mappe di origine sono un must. Ho un grosso problema con loro:

A seconda della modalità devtool, mappe di origine sono o lento per analizzare (eval) o non utilizzati per mappare alcune tracce dello stack (eval-source-map), ad esempio, ci sono volte l'intero stack trace assomiglia a questo :
at eval (eval at <anonymous> http://localhost:8082/js/app.js:2004:2), <anonymous>:43:67).
Inoltre, quando si chiama manualmente console.trace o console.error, l'output non viene mappato. Quindi devi usare strumenti come sourcemapped-stacktrace - questo è sia lento che soggetto a errori.

Attualmente utilizzo require.js per lo sviluppo perché mi consente di eseguire il debug dell'applicazione con estrema facilità: ogni traccia dello stack punta al file e alla riga corretti.

Come ottengo lo stesso risultato con il webpack?

EDIT:
problema correlati in Google Chrome: problema https://code.google.com/p/chromium/issues/detail?id=376409

correlate in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=583083

Answer 1

Quale devtools usi? Il millesimo può variare, ma Chrome (e IE/Edge, sì ... IE e Edge) tendono a gestire meglio le sourcemaps. Mentre a questo punto tutti i principali browser li supportano, ho avuto la peggiore esperienza con Firefox.

Abbiamo fasci molto grandi e sourcemaps non hanno causato alcuna lentezza in devtools. Quale modalità stai usando? Per il webpack, l'uso di "eval" farà una mappa di sourline inline che mappa i file, ma non la fonte (in modo da vedere il codice generato, ma la correlazione 1: 1 con i file originali). Poiché molti costrutti ES6, Typescript e Coffeescript non si adattano bene (ad esempio generatori o comprensione), questa è solitamente la modalità più semplice da utilizzare ed è anche la più veloce. Usando eval rendilo anche "funziona" in sviluppatori di Chrome senza alcuna azione da parte dello sviluppatore (i tuoi file saranno sotto il pacchetto web: // pseudo-cartella)

Per la traccia dello stack, non so se sia un browser specifico o cosa Usiamo Mocha per unit test, che non sembra che stia facendo qualcosa di speciale per le sourcemaps, e cattura le tracce di stack per renderle correttamente sul web pack del runner di test (include anche il prefisso webpack: // insieme al nome del file originale e il numero di linea corretto), quindi forse la necessità di quella libreria è specifica del browser o obsoleta?

Answer 2

ho trovato utile per aggiungere un compito npm run watch che prende il via webpack in questo modo:

webpack -w --devtool eval

Ciò si traduce in fonte di mappe che almeno hanno il nome corretto del modulo. È un po 'di confusione anche se la fonte mappata all'origine è una sorta di elaborazione pre-sorta (babele)? Così vedrete in qualcosa source come:

import react from 'react';

Ma il nome della variabile reale sarà munged a qualcosa come _react2 o simili. Mi piacerebbe che l'origine mappata fosse la versione elaborata con i brutti nomi delle variabili o che l'ambito avesse le definizioni come visto nell'origine mappata.

La linea attuale che ho nella mia package.json per l'attività di cui sopra è:

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