Detaillierte Erläuterung der Kernkonzepte des Webpack-Frameworks

Webpack ist ein Front-End-Paketierungstool (keine Bibliothek oder Framework). Es kann verschiedene Ressourcen wie JS (einschließlich JSX), Coffee, CSS (einschließlich Less/Sass), Bilder usw. als Module verwenden. Handhabung und Verwendung. In diesem Artikel werden hauptsächlich die Kernkonzepte des Webpack-Frameworks vorgestellt (Zusammenstellung von Wissenspunkten). Ich hoffe, dass es allen helfen kann.

1. Grundwissenspunkte

　1.1 Webpack ist ein Modul-Packager für moderne JavaScript-Anwendungen (Modul Bundler). Wenn Webpack eine Anwendung verarbeitet, erstellt es rekursiv ein Abhängigkeitsdiagramm, das alle Module enthält, die die Anwendung benötigt, und packt dann alle diese Module in ein oder mehrere Bundles.

1.2 Die vier Kernkonzepte von Webpack:

1.2.1 Eintrag: Einstiegspunkt, Einstiegsstartpunkt (es können mehrere sein), Webpack startet von diesem Ausgangspunkt, um herauszufinden, welcher Von der Datei hängt die Eintragsdatei ab, um ein internes Abhängigkeitsdiagramm zu erstellen und es nach der Verarbeitung in eine Datei namens Bundles auszugeben.

　1.2.2 Ausgabe (Ausgabe): Geben Sie die vom Eintrag verarbeitete Bundle-Datei an Punkt: Der Ausgabepfad (Pfad) und der Name (Dateiname) der Verpackung und anderer Verarbeitung; der Webpack-Loader konvertiert im Wesentlichen alle Arten von Dateien in Module, auf die das Abhängigkeitsdiagramm der Anwendung direkt verweisen kann:

1.2.3.1 Verwenden Sie das Testattribut, um die entsprechenden konvertierbaren Dateien für den Loader zu identifizieren

　1.2.3.2 Verwenden Sie das Use-Attribut, um diese Dateien zu konvertieren, sodass sie dem Abhängigkeitsdiagramm und schließlich dem Bundle hinzugefügt werden

Wenn Sie Webpack verwenden möchten, um den Loader in der Konfiguration zu definieren, muss er in module.rules und nicht in Regeln definiert werden

　1.2.4 Plugins: von der Verpackungsoptimierung und -komprimierung bis zur Neudefinition von Variablen in der Umgebung. Die Plug-in-Schnittstelle ist äußerst leistungsstark und kann eine Vielzahl von Aufgaben bewältigen

　 Um ein Plug-in zu verwenden, müssen Sie es nur require() und dann zum Plugins-Array hinzufügen. Die meisten Plugins können über Optionen angepasst werden. Sie können dasselbe Plug-in auch mehrmals für verschiedene Zwecke in einer Konfigurationsdatei verwenden. In diesem Fall müssen Sie eine Instanz davon erstellen, indem Sie den neuen Operator verwenden.

Webpack bietet viele sofort einsatzbereite Plugins! Weitere Informationen finden Sie in der Plug-in-Liste. Detailliertere Bilder und Texte finden Sie in der offiziellen Dokumentation https://doc.webpack-china.org/concepts/.

Verwandte Empfehlungen:

Detaillierte Erläuterung der Beispiele für die Entwicklung mehrseitiger Webpack+Express-Websites

Electron-Tutorial zum Erstellen von React und Webpack-Desktopanwendungen

Zusammenfassung des Tutorials zur Front-End-Leistungsoptimierung des Webpack-Lernprogramms

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Kernkonzepte des Webpack-Frameworks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!