Konfigurieren Sie das Webpack so, dass das Debuggen des Browsers möglich ist

130

Ich bin neu in Webpack und konvertiere eine vorhandene Webanwendung, um sie zu verwenden.

Ich verwende Webpack, um mein JS zu bündeln und zu minimieren, was bei der Bereitstellung großartig ist. Dies macht es jedoch sehr schwierig, das Debuggen während der Entwicklung durchzuführen.

Normalerweise verwende ich den in Chrome integrierten Debugger, um JS-Probleme zu debuggen. (Oder Firebug auf Firefox). Mit dem Webpack ist jedoch alles in einer Datei gespeichert, und das Debuggen mit diesem Mechanismus wird schwierig.

Gibt es eine Möglichkeit, das Bündeln schnell ein- und auszuschalten? oder Minimierung ein- und ausschalten?

Ich habe nachgesehen, ob es eine Script Loader-Konfiguration oder eine andere Einstellung gibt, aber sie erscheint nicht offensichtlich.

Ich hatte noch nicht die Zeit, alles so zu konvertieren, dass es sich wie ein Modul verhält und verwendet werden muss. Also benutze ich einfach das Muster require ("script! ./ File.js") für mein Laden.

javascript webpack Jim
quelle
3
Haben Sie eine Lösung für dieses Problem gefunden? Ich bevorzuge es auch, die JS-Konsole zu verwenden, um verfügbare Variablen anzuzeigen. Mein Hauptproblem ist, dass Webpack alle diese Variablen im Modul verbirgt, so dass sie nicht mehr zugänglich sind
user1496984
2
Ich habe nie wirklich eine Lösung gefunden, daher haben wir das Webpack leider abgebrochen.
Jim
Was benutzt du jetzt? Zum Zeitpunkt des Schreibens scheint Webpack immer noch das beliebteste Build-Tool zu sein, das ich finden kann.
Richard

Antworten:

100

Sie können mit Quell abbildet die Zuordnung zwischen dem Quellcode und die gebündelte / minimierte eine zu bewahren.

Webpack bietet die Option devtool , um das Debuggen im Entwicklertool zu verbessern und lediglich eine Quellzuordnung der gebündelten Datei für Sie zu erstellen. Diese Option kann über die Befehlszeile oder in der Konfigurationsdatei webpack.config.js verwendet werden.

Unten finden Sie ein erfundenes Beispiel, das die Befehlszeile zum Generieren der gebündelten Datei ( bundle.js ) zusammen mit der generierten Quellzuordnungsdatei ( bundle.js.map ) verwendet.

$ 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();

hallo.js

module.exports = function () {
  return 'Hello world!';
};

Wenn Sie index.html in Ihrem Browser öffnen (ich verwende Chrome, aber ich denke, es wird auch in anderen Browsern unterstützt), sehen Sie auf der Registerkarte Quellen, dass Sie die gebündelte Datei unter dem Schema file: // und die Quelldateien unter haben das spezielle Webpack: // Schema.

Debuggen mit Quellkarten

Und ja, Sie können mit dem Debuggen beginnen, als hätten Sie den ursprünglichen Quellcode! Versuchen Sie, einen Haltepunkt in eine Zeile zu setzen und die Seite zu aktualisieren.

Haltepunkt mit Quellkarten

dreyescat
quelle
2
bundle.map zeigt auf die js-Datei, aber was ist, wenn die eigentliche js-Datei auch eine Map enthält, die beispielsweise tsx oder ts enthält?
Andrej Kovacik
3

Quellkarten sind sehr nützlich, wie bereits erwähnt.
Manchmal kann es jedoch schwierig sein, die zu verwendende Quellkarte auszuwählen.

Dieser Kommentar zu einem der Probleme mit der Webpack-Quellkarte kann hilfreich sein, um die zu verwendende Quellkarte basierend auf den Anforderungen auszuwählen.

Abhinav Singi
quelle
1

Schauen Sie hier

Es ist ein Verschönerer, der Javascript deminifiziert. Unten finden Sie eine Liste mit verschiedenen Plugins und Erweiterungen für Browser. Schauen Sie sich diese an.

Sie könnten an FireFox Deminifier interessiert sein , das Ihr Javascript deminifizieren und formatieren soll, wenn es vom Server abgerufen wird.

Geben Sie hier die Bildbeschreibung ein

Banane
quelle
9
Deminifizieren ist nicht dasselbe wie Deaktivieren des Minimierens, da Kommentare immer noch entfernt werden, Zeilennummern nicht mehr übereinstimmen und Variablennamen nicht identisch sind. Davon abgesehen ist es besser als nichts.
Jim
1

Chrome hat auch eine Formatoption im Debugger. Es enthält nicht alle Informationen, die eine normale Quelldatei enthalten würde, aber es ist ein guter Anfang. Sie können auch Haltepunkte festlegen. Die Schaltfläche, auf die Sie klicken, befindet sich unten links im ersten Screenshot und sieht aus wie {}.

Vor dem Formatieren: Geben Sie hier die Bildbeschreibung ein

Nach der Formatierung.

Geben Sie hier die Bildbeschreibung ein

Jolly1234
quelle