Detaillierte Erklärung der Verwendung von Devtool im Webpack

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung des Devtools von Webpack vor. Jetzt werde ich es mit Ihnen teilen und Ihnen eine Referenz geben.

Über Devtool

Diese Option steuert, ob und wie Quellkarten generiert werden. Die auf der offiziellen Website angegebenen optionalen Werte sind:

Einige dieser Werte eignen sich für die Entwicklung, andere für die Produktion. Für die Entwicklung benötigen Sie im Allgemeinen schnelle Quellkarten auf Kosten der Bundle-Größe. Für die Produktion benötigen Sie jedoch unabhängige Quellkarten, die präzise sind und die Minimierung unterstützen.

Wählen Sie einen Quellzuordnungsstil, um den Debugging-Prozess zu verbessern. Diese Werte können die Build- und Rebuild-Geschwindigkeit erheblich beeinflussen. Anstatt die Devtool-Option zu verwenden, können Sie für weitere Optionen auch direkt SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin verwenden. Verwenden Sie Devtool-Optionen und Plugins nicht gleichzeitig. Die Devtool-Option fügt das Plugin intern hinzu, sodass das Plugin am Ende zweimal angewendet wird.

Detailliertes Beispiel

1. Neues print.js erstellen

export default function printMe() {
 console.log('武昌鱼@222');
}

2. Neues index.js erstellen

import printMe from './print.js';
function component() {
 var element = document.createElement('p');
 var btn = document.createElement('button');
 btn.innerHTML = 'Click 1me and check 1the console!';
 btn.onclick = printMe;
 element.appendChild(btn);
 return element;
}
document.body.appendChild(component());

3. Erstellen Sie ein neues Webpack .config.js

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
 entry: './src/index.js',
 output: {
  filename: '[name].js',
  path: path.resolve(__dirname, 'dist')
 },
 plugins: [
  new CleanWebpackPlugin(['dist']),
  new HtmlWebpackPlugin({
   title: ' webpack之devtool'
  })
 ]
};

4. Verwenden Sie verschiedene Devtool-Optionen

keine

Klicken Sie nach dem Packen auf die Schaltfläche „Drucken“ und die Konsole Zeigt main.js:96 an, der generierte Code lautet wie folgt:

eval

eval mode kapselt jeden Modul in Eval-Paket Es wird ausgeführt und am Ende wird ein Kommentar angehängt.

Jedes Modul wird mit evaland//@ sourceURL ausgeführt.

Klicken Sie nach dem Packen auf die Schaltfläche „Drucken“. Die Konsole zeigt print.js:3 an und der generierte Code lautet wie folgt:

source-map

Nach dem Packen finden Sie eine zusätzliche index.js.map-Datei in Ihrem Ausgabeverzeichnis Die Datei zeichnet die SourceMap auf. Wie Zeilen- und Spalteninformationen den Quellcodeinformationen zugeordnet werden. Klicken Sie auf die Schaltfläche „Drucken“, die Konsole zeigt print.js:3 an und der generierte Code lautet wie folgt:

main.js

main.js.map

hidden-source-map

Nach dem Packen hat main.js weniger Endkommentare als die Option „source-map“, aber es befindet sich im Ausgabeverzeichnis Die index.js.map ist nicht weniger. Klicken Sie auf die Schaltfläche „Drucken“ und die Konsole zeigt main.js:96 an.

inline-source-map

Nach dem Packen können Sie sehen, dass der Kommentar „sourceMap“ am Ende als „DataURL“ in das Bundle eingebettet ist wurde dem Bundle hinzugefügt und die gesamte Bundle-Datei wurde extrem groß. Klicken Sie auf die Schaltfläche „Drucken“, die Konsole zeigt print.js:3 an und der generierte Code lautet wie folgt:

main.js

eval -source-map

Ähnlich wie eval, aber die sourceMap im Kommentar wird in DataURL konvertiert. Die Konsole zeigt print.js?dc38:2 an und der generierte Code lautet wie folgt:

main.js

cheap-source- Karte

Die von source-map generierten Ergebnisse sind ähnlich. Der Inhalt von index.js im Ausgabeverzeichnis ist derselbe. Der Inhalt von index.js.map, der von cheap-source-map generiert wird, ist jedoch viel weniger Code als der von index.js.map, der von source-map generiert wurde. Vergleichen wir oben die Ergebnisse von index.js.map, die von source-map generiert wurden . Es wurde festgestellt, dass dem Quellattribut eine Informationsspalte fehlt, wie unten gezeigt:

main.js.map

cheap- module-source-map

Generieren Sie eine Karte ohne Spaltenzuordnung in einer separaten Datei. Ohne Spaltenzuordnung wird die Paketierungsgeschwindigkeit verbessert, aber es führt auch dazu, dass die Browser-Entwicklertools nur bestimmte Zeilen zuordnen können einander entsprechen. Die Zuordnung zu bestimmten Spalten (Symbolen) führt zu Unannehmlichkeiten beim Debuggen.

Zusammenfassung

Empfohlen für die Entwicklungsumgebung:

1.eval: Jedes Modul wird mit eval() und //@sourceURL ausgeführt. Es ist sehr schnell. Der Hauptnachteil besteht darin, dass die Zeilennummer nicht korrekt angezeigt wird, da sie dem transformierten Code und nicht dem Originalcode zugeordnet ist (keine Quellzuordnung vom Loader).

2.eval-source-map: Jedes Modul wird mit eval() ausgeführt und SourceMap wird als DataUrl zu eval() hinzugefügt. Anfangs ist es langsam, bietet aber schnelle Wiederherstellungsgeschwindigkeiten und erzeugt realistische Dateien. Die Zeilennummer wird korrekt zugeordnet, da sie dem ursprünglichen Code zugeordnet wurde. Es produziert Entwicklungsressourcen höchster Qualität.

3.cheap-eval-source-map: Ähnlich wie bei eval-source-map wird jedes Modul mit eval() ausgeführt. Es gibt keine Spaltenzuordnung, es ordnet nur Zeilennummern zu. Es ignoriert den Quellcode vom Loader und zeigt nur den transformierten Code an, ähnlich wie bei eval devtool.

4.cheap-module-eval-source-map: Ähnlich wie bei cheap-eval-source-map wird in diesem Fall die Quellkarte aus dem Loader verarbeitet, um bessere Ergebnisse zu erzielen. Allerdings wird die Loader-Quellkarte auf eine einzige Karte pro Zeile reduziert.

Empfohlen für die Produktionsumgebung:

1. (Keine): (Devtool-Option weglassen) – Löst SourceMap nicht aus. Das ist eine großartige Wahl.

2.source-map: Eine vollständige SourceMap liegt als separate Datei vor. Es fügt dem Bundle eine Referenzanmerkung hinzu, damit Entwicklungstools wissen, wo sie zu finden ist.

3. Hidden-Source-Map: Identisch mit Source-Map, fügt dem Bundle jedoch keine Referenzkommentare hinzu. Sie können diese Option verwenden, wenn Sie möchten, dass SourceMaps nur Fehler-Stack-Traces aus Fehlerberichten zuordnet, Ihre SourceMap aber nicht Browser-Entwicklungstools zugänglich machen möchten.

4.nosources-source-map: Eine SourceMap wird ohne Quellcode erstellt. Es kann verwendet werden, um Stack-Traces auf dem Client-Computer zuzuordnen, ohne den gesamten Quellcode offenzulegen. Sie können Quellkartendateien auf dem Webserver bereitstellen.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Vergleich von Map, Set, Array und Objekt in ES6 (ausführliches Tutorial)

So verwenden Sie Node .js Implementierung eines statischen Servers

So implementieren Sie die entsprechende Rückruffunktion nach dem Laden mithilfe eines JS-Skripts

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung der Verwendung von Devtool im Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!