Fazit zunächst:
1. Der Unterschied zwischen Loader und Plugin
Der Loader wird auch „ Loader “ genannt, da Webpack nur JS-Dateien nativ analysieren kann und Sie für andere Dateitypen den Loader verwenden müssen. Daher besteht die Rolle des Loaders darin, Dateien in verschiedenen Formaten zu analysieren und zu verarbeiten, z. B. die Konvertierung von ES6 in ES5, TypeScript in JavaScript usw. , damit sie zu Abhängigkeiten hinzugefügt werden können.
Plugin ist das, was wir oft als „ Plugin “ bezeichnen. Der Hauptzweck besteht darin, die Funktionalität von Webpack zu erweitern und zusätzliche Build-Aufgaben hinzuzufügen. Beispielsweise werden Verpackungsoptimierung, Umgebungsvariableninjektion, Optimierung der Build-Geschwindigkeit usw. während des gesamten Kompilierungszyklus in
webpackverschiedenen Phasen (Hook/Lebenszyklus) ausgeführt .webpack
2. Was sind die gängigen Loader und Plugins?
Gängige Lader:
CSS-Loader : Verarbeitet CSS-Dateien, damit sie in JavaScript-Modulen verwendet werden können.
Laden Sie CSS, unterstützen Sie Modularisierung, Komprimierung, Dateiimport und andere Funktionen.
Style-Loader : Mounten Sie das analysierte CSS style mithilfe von Tags in die Tags der Seite head .
babel-loader : ES6+ in ES5 konvertieren;
Dateilader : Kopieren Sie die Datei in das Ausgabeverzeichnis und verweisen Sie über einen relativen Pfad im Code auf die Ausgabedatei (Verarbeitung von Bildern und Schriftarten);
URL-Loader : Ähnlich wie beim File-Loader besteht der Unterschied darin, dass der Benutzer einen Schwellenwert festlegen kann. Wenn dieser größer als der Schwellenwert ist, wird er zur Verarbeitung an den File-Loader übergeben. Wenn er kleiner als der Schwellenwert ist, Der Dateiinhalt wird in Form von Base64 in den Code eingefügt (Verarbeitung von Bildern und Schriftarten).
eslint-loader: JavaScript-Code über ESLint prüfen;
Image-Loader: lädt und komprimiert Bilddateien;
Gängige Plugins:
html-webpack-plugin : HTML-Dateien generieren und die gepackten JS- und CSS-Dateien automatisch in die HTML-Dateien einfügen.
Mini-CSS-Extract-Plugin : Trennt Stildateien , extrahiert CSS in separate Dateien und unterstützt das Laden bei Bedarf
(ersetzt extract-text-webpack-plugin);
terser-webpack-plugin: Unterstützt das Komprimieren von ES6-Code (Webpack4);
webpack-bundle-analyzer : Visualisieren Sie das Volumen der Webpack-Ausgabedateien.
webpack-parallel-uglify-plugin: Codekomprimierung in mehreren Prozessen durchführen, um die Build-Geschwindigkeit zu verbessern
clean-webpack-plugin : Bereinigen Sie das Ausgabeverzeichnis vor jedem Build, um zu verhindern, dass alte Dateien zurückbleiben.
uglifyjs-webpack-plugin : JavaScript-Code komprimieren und Dateigröße reduzieren (vor Webpack4);
Optimize-CSS-Plugin: CSS komprimieren;
define-plugin: Umgebungsvariablen definieren;
Ermöglicht die Erstellung konfigurierter globaler Objekte zur Kompilierungszeit; (nach Webpack 4 wird es durch Angabe des Modus automatisch konfiguriert)
Es ist ein integriertes Plug-In von Webpack und muss nicht installiert werden.
copy-webpack-plugin : Statische Dateien in das Ausgabeverzeichnis kopieren.
Wenn wir beispielsweise während des Verpackungsprozesses von Vue einige Dateien im öffentlichen Verzeichnis ablegen, wird dieses Verzeichnis in den dist-Ordner kopiert
Spezifische Analyse:
1、Lader
Welche Rolle spielt der Loader in Webpack? Welche Lader werden am häufigsten verwendet? -CSDN-Blog
Loader bedeutet wörtlich übersetzt „ Lader “.
Webpack behandelt alle Dateien als Module, Webpack kann jedoch nur JS-Dateien nativ analysieren, was verwendet wird, wenn Sie auch andere Dateien packen möchten loader.
loaderDie Funktion besteht also darin, dem Webpack die Möglichkeit zu geben, Nicht-JavaScript-Dateien zu laden und zu analysieren .
2、Plugin
Plugin bedeutet wörtlich übersetzt „ Plugin “.
Das Plugin kann die Funktionen von Webpack erweitern und Webpack mehr Flexibilität verleihen.
Viele Ereignisse werden während des Lebenszyklus der Ausführung von Webpack übertragen. Das Plugin kann diese Ereignisse abhören und die Ausgabeergebnisse zu gegebener Zeit über die von Webpack bereitgestellte API ändern.
3. Verschiedene Verwendungen:
Der Loader ist in module.rules konfiguriert , was bedeutet, dass er als Parsing-Regel des Moduls vorhanden ist.
Jedes Konfigurationselement enthält ein oder mehrere Regelobjekte, die festlegen, welche Dateien von welchen Loadern verarbeitet werden müssen.
Der Typ ist ein Array, jedes Element ist eins
Object, das beschreibt, welcher Dateityp (test), welche Ladung (loader) und welche Parameter verwendet werden (options)
Das Plugin wird separat in konfiguriert plugins .
Der Typ ist ein Array, jedes Element ist eine
pluginInstanz und die Parameter werden über den Konstruktor übergeben.
4. Zusammenfassung
Zusammenfassend lässt sich sagen, dass der Loader für die Modulkonvertierung verwendet wird, während das Plugin dazu dient, die Funktionalität von Webpack zu erweitern und zusätzliche Build-Aufgaben hinzuzufügen.
Sie werden über verschiedene Konfigurationselemente in der Webpack-Konfigurationsdatei konfiguriert und verwendet.