Webpack-Framework (Master-Core-Technologie)

Webpack ist ein Modul-Bundler für moderne JavaScript-Anwendungen. In diesem Artikel werden hauptsächlich die Kernkonzepte des Webpack-Frameworks (Organisation von Wissenspunkten) vorgestellt. Freunde in Not können sich auf

Was ist Webpack? webpack Es ist ein Verpackungstool für die Front-End-Konstruktion (keine Bibliothek oder Framework). Es kann verschiedene Ressourcen wie JS (einschließlich JSX), Kaffee, CSS (einschließlich Less/Sass), Bilder usw. verarbeiten und verwenden Module.

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 beim Definieren des Loaders in der Konfiguration Webpack verwenden möchten, muss dieser in module.rules anstelle von 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. Weitere detaillierte Bilder und Texte finden Sie in der offiziellen Dokumentation https://doc.webpack-china.org/concepts/.

Das Obige ist der Text, den ich zusammengestellt habe, ich hoffe, er wird für alle hilfreich sein

Verwandte Artikel:

Wie man den Kreuzkoordinaten-Folge-Mauseffekt in implementiert JS

Probleme mit unsicheren Bildpfaden mit Angular4

So erstellen Sie Electron-Anwendungen in Webpack

In Webpack Zu Optimierungskonfigurationsproblemen in

Wie man in jQuery dynamisch zur Liste hinzufügt

Wie man die Online-Kundendienstfunktion implementiert in jQuery

So implementieren Sie die Ein-/Austrittsanimation in Vue

Detaillierte Einführung in Routing und Middleware in node.js

So implementieren Sie die grundlegende Warenkorbfunktion mit Angular

Einführung in kontrollierte Komponenten und unkontrollierte Komponenten in React im Detail

Verwendung vue zur Implementierung einfacher Tastaturoperationen

Das obige ist der detaillierte Inhalt vonWebpack-Framework (Master-Core-Technologie). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!