Zusammenfassung der Verwendung des Webpack-Frameworks

Dieses Mal werde ich Ihnen eine Zusammenfassung der Vorsichtsmaßnahmen bei der Verwendung des Webpack-Frameworks geben. Das Folgende ist ein praktischer Fall.

Was ist Webpack?

Webpack ist ein Front-End-Paketierungstool (keine Bibliothek oder Framework). Es kann verschiedene Ressourcen wie JS (einschließlich JSX), Kaffee, CSS (einschließlich weniger/sass), Bilder usw. verarbeiten und verwenden.

1. Grundlegende Wissenspunkte

1.1 Webpack ist ein Modul-Bundler für moderne

JavaScript-Anwendungen. Beim Webpack Während eine Anwendung verarbeitet wird, erstellt sie rekursiv ein Abhängigkeitsdiagramm graph), das jedes Modul enthält, das 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 Datei ist das, wovon die

Eintragsdatei abhängt, um ein internes Abhängigkeitsdiagramm zu erstellen, es zu verarbeiten und in eine Datei namens Bundles auszugeben

1.2.2 Ausgabe: Geben Sie den Eintrag an. Der Ausgabepfad (Pfad ) und Name (Dateiname) der von Punkt     

1.2.3 verarbeiteten Bundle-Datei Loader: Wird zum Verarbeiten von Nicht-JS-Dateien verwendet. Er kann alle Dateien in Module konvertieren, die Webpack verarbeiten kann, und sie dann zur Verpackung und anderen Verarbeitung an Webpack übergeben Der Loader konvertiert im Wesentlichen alle Arten von Dateien in Module, auf die vom Abhängigkeitsdiagramm der Anwendung direkt verwiesen werden kann. Er hat zwei Ziele:

1.2.3.1 Verwenden Sie das Testattribut, um die den Loader-Dateien entsprechenden Konvertierbaren 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 den Loader in der Webpack-Konfiguration definieren möchten, muss er definiert werden in module.rules statt in Regeln

1.2.4 Plugins: von der Verpackungsoptimierung und Komprimierung bis hin 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 dem 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.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

vue-cli+webpack So erstellen Sie eine Vue-Entwicklungsumgebung

So erstellen Sie vue2 -webpack2-Framework

Das obige ist der detaillierte Inhalt vonZusammenfassung der Verwendung des Webpack-Frameworks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!