Webpack so konfigurieren, dass Browser-Debugging zugelassen wird

Question 1

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

Ich verwende Webpack, um mein JS zu bündeln und zu verkleinern, was großartig ist, wenn es bereitgestellt wird, aber das macht es sehr schwierig, während der Entwicklung zu debuggen.

Normalerweise verwende ich den integrierten Debugger von Chrome, um JS-Probleme zu debuggen. (Oder Firebug auf Firefox). Bei Webpack ist jedoch alles in einer Datei untergebracht, und es wird schwierig, mit diesem Mechanismus zu debuggen.

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

Ich habe nachgesehen, ob es eine Skript-Loader-Konfiguration oder eine andere Einstellung gibt, aber es scheint nicht offensichtlich zu sein.

Ich habe noch nicht die Zeit gehabt, alles so umzuwandeln, dass es wie ein Modul funktioniert und verwendet werden muss. Also verwende ich einfach das Muster require(“script!./file.js”) für mein Laden.

Question 2

Sie können verwenden Quellkarten um die Zuordnung zwischen Ihrem Quellcode und dem gebündelten/minifizierten Code beizubehalten.

Webpack bietet die Entwicklungstool Option zum Verbessern des Debuggens im Entwicklertool, indem Sie einfach eine Quellzuordnung der gebündelten Datei für Sie erstellen. Diese Option kann über die Befehlszeile oder in Ihrem verwendet werden webpack.config.js Konfigurationsdatei.

Unten finden Sie ein erfundenes Beispiel mit der Befehlszeile zum Generieren der gebündelten Datei (Bundle.js) zusammen mit der generierten Quellzuordnungsdatei (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="https://stackoverflow.com/questions/27626764/bundle.js"></script>
  </body>
</html>

Eintrag.js

var hello = require('./hello.js');
document.body.innerHTML += 'It works ' + hello();

hallo.js

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

Wenn Sie öffnen index.html in Ihrem Browser (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 der Datei:// Schema und die Quelldateien unter dem Special webpack:// planen.

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

Question 3

Ich denke, es ist besser, Ihr Projekt im Produktions- und Entwicklungsmodus einzurichten
https://webpack.js.org/guides/production/
Es enthält auch, wie Sie Ihren Code dem Debuggen zuordnen

devtool: 'inline-source-map'

Question 4

Wie bereits erwähnt, sind Quellkarten sehr nützlich.

Aber manchmal kann die Auswahl der zu verwendenden Quellkarte mühsam sein.

Dieser Kommentar auf einem der Problem mit der Webpack-Quellkarte kann hilfreich sein, um basierend auf den Anforderungen auszuwählen, welche Quellzuordnung verwendet werden soll.

Question 5

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

Vor dem Formatieren:

Nach dem Formatieren.

Question 6

Guck mal Hier

Es ist ein Verschönerer, der Javascript deminifiziert. Unten finden Sie eine Liste mit verschiedenen Plugins und Erweiterungen für Browser. Probieren Sie sie aus.

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

_{(Quelle: mozilla.net)}