Webpack-Lader gegen Plugins; was ist der Unterschied?

Was ist der Unterschied zwischen Loadern und Plugins im Webpack?

Die Dokumentation für Plugins sagt nur:

Verwenden Sie Plugins, um Funktionen hinzuzufügen, die normalerweise mit Bundles im Webpack zusammenhängen.

Ich weiß, dass babel einen Loader für jsx / es2015-Transformationen verwendet, aber es sieht so aus, als würden andere gängige Aufgaben (z. B. Copy-Webpack-Plugin) stattdessen Plugins verwenden.

Loader führen die Vorverarbeitungstransformation praktisch aller Dateiformate durch, wenn Sie etw wie require("my-loader!./my-awesome-module")in Ihrem Code verwenden. Im Vergleich zu Plugins sind sie recht einfach, da sie (a) nur eine einzige Funktion dem Webpack aussetzen und (b) den tatsächlichen Erstellungsprozess nicht beeinflussen können.

Plugins hingegen können sich tief in das Webpack integrieren, da sie Hooks im Build-System von Webpacks registrieren und auf den Compiler und dessen Funktionsweise sowie auf die Kompilierung zugreifen (und ihn ändern) können. Daher sind sie leistungsfähiger, aber auch schwerer zu warten.

Ergänzende und einfachere Antwort hinzufügen.

Lader:

Loader arbeiten während oder vor der Generierung des Bundles auf der Ebene der einzelnen Dateien .

Plugins:

Plugins arbeiten auf Bundle- oder Chunk- Ebene und normalerweise am Ende des Bundle-Generierungsprozesses. Plugins können auch ändern, wie die Bundles selbst erstellt werden. Plugins haben eine leistungsstärkere Steuerung als Loader.

Nur als Beispiel können Sie im folgenden Bild deutlich sehen, wo Loader arbeiten und wo Plugins funktionieren -

Referenzen: Artikel und Bild

Webpack ist im Kern nur ein Dateibündler. In Anbetracht eines sehr einfachen Szenarios (keine Codeaufteilung) kann dies nur die folgenden Aktionen bedeuten (auf hoher Ebene):

1. Suchen Sie die Eingabedatei und laden Sie ihren Inhalt in den Speicher
2. Ordnen Sie bestimmten Text innerhalb des Inhalts zu und bewerten Sie diese (z. B. @import).
3. Finden Sie die Abhängigkeiten basierend auf der vorherigen Bewertung und machen Sie dasselbe mit ihnen
4. nähen Sie sie alle zu einem Bündel im Speicher
5. Schreiben Sie die Ergebnisse in das Dateisystem

Wenn Sie die obigen Schritte genau untersuchen, stimmt dies mit dem überein, was ein Java-Compiler (oder ein beliebiger Compiler) tut. Es gibt natürlich Unterschiede, aber diese sind nicht wichtig, um Loader und Plugins zu verstehen.

Lader:

sind hier, weil Webpack verspricht, jeden Dateityp zu bündeln.

Da Webpack im Kern nur in der Lage ist, js-Dateien zu bündeln, bedeutete dieses Versprechen, dass das Webpack-Kernteam Build-Flows einbeziehen musste, die es externem Code ermöglichten, einen bestimmten Dateityp so zu transformieren, dass Webpack ihn nutzen konnte.

Diese externen Codes werden als Loader bezeichnet und normalerweise in den obigen Schritten 1 und 3 ausgeführt. Da die Phase, in der diese Loader ausgeführt werden müssen, offensichtlich ist, benötigen sie keine Hooks und beeinflussen auch nicht den Build-Prozess (da der Build oder das Bundle erst in Schritt 4 erfolgt).

Loader bereiten also die Bühne für die Kompilierung vor und erweitern sozusagen die Flexibilität des Webpack-Compilers.

Plugins:

sind hier, weil, obwohl Webpack nicht direkt variable Ausgabe verspricht, die Welt es will und Webpack es erlaubt.

Da das Webpack im Kern nur ein Bündler ist und dabei mehrere Schritte und Unterschritte durchläuft, können diese Schritte verwendet werden, um zusätzliche Funktionen einzubauen.

Der Produktionserstellungsprozess (Minimieren und Schreiben in ein Dateisystem), der beispielsweise eine native Funktion des Webpack-Compilers ist, kann als Erweiterung seiner Kernfunktion (die nur gebündelt wird) behandelt und wie ein natives Plugin behandelt werden. Hätten sie es nicht zur Verfügung gestellt, hätte es jemand anderes getan.

Wenn man sich das native Plugin oben ansieht, sieht es so aus, als ob die Webpack-Bündelung oder -Kompilierung in einen Kern-Bündelungsprozess sowie viele native Plugin-Prozesse unterteilt werden kann, die wir deaktivieren oder anpassen oder erweitern können. Dies bedeutete, dass externer Code an bestimmten Punkten, aus denen sie auswählen können (sogenannte Hooks), am Bündelungsprozess teilnehmen kann.

Plugins beeinflussen daher die Ausgabe und erweitern die Fähigkeit des Webpack-Compilers.

Lader arbeiten auf Dateiebene . Sie können Vorlagen schreiben, Code verarbeiten, um ihn je nach Bedarf zu transpilieren usw.

Plugins arbeiten auf Systemebene . Sie können Muster, Handhabung des Dateisystems (Name, Pfad) usw. bearbeiten.