Kernkonzepte des Webpack-Frameworks (Kundenspezifische Zusammenfassung)

Was ist webpack?

webpack ist ein Frontend-Build-Tool (keine Bibliothek oder Framework), das verschiedene Ressourcen wie JS (inkl. JSX), Coffee, CSS (inkl. Less)/Sass), Bilder und andere werden als Module verarbeitet und verwendet

1.Grundkenntnisse

　　1.1 webpack ist ein Modul-Packager (module bundler) für moderne JavaScript-Anwendungen. Wenn webpack eine Anwendung verarbeitet, baut er rekursiv eine Abhängigkeitskarte (dependency graph) auf, die alle Module enthält, die von der Anwendung benötigt werden, und packt diese Module in eine oder mehrere Bundles

　　1.2Die vier Kernkonzepte von webpack:

　　　　1.2.1 entry (Eingang): Entry Point, Ausgangspunkt (es können mehrere geben), webpack beginnt am Ausgangspunkt, welche Dateien von der Eingangsdatei abhängig sind, um eine interne Abhängigkeitskarte zu erstellen und diese nach der Verarbeitung in Dateien namens Bundles auszugeben

　　　　1.2.2 output (Ausgabe): Definiert den Ausgabeort (Pfad) und den Namen (Dateiname) der Bundles-Dateien, die nach der Verarbeitung des Entry Points erstellt werden　　　　

　　　　1.2.3 loader (Lader): Wird verwendet, um nicht-JS-Dateien zu verarbeiten, um alle Dateien in Module umzuwandeln, die von webpack verarbeitet werden können, und diese dann an webpack zur Verpackung und weiteren Verarbeitung weiterzugeben; im Wesentlichen ist der webpack-Loader der Prozess, alle Arten von Dateien in Module umzuwandeln, die direkt in der Abhängigkeitskarte der Anwendung referenziert werden können, und hat zwei Ziele:

　　　　　　1.2.3.1 Verwenden Sie das Attribut test, um die Dateien zu erkennen, die für den Loader konvertierbar sind

　　　　　　1.2.3.2 Verwenden Sie das Attribut use, um diese Dateien umzuwandeln, sodass sie dem Abhängigkeitsdiagramm hinzugefügt werden und letztlich in den Bundle hinzugefügt werden

　　　　　　Um Loader in der webpack-Konfiguration zu definieren, müssen Sie sie in module.rules und nicht in rules definieren

　　　　1.2.4 Plugins (Plugins): Von der Optimierung und Komprimierung des Packens bis hin zur Neudefinierung von Variablen in der Umgebung. Der Plugin-Interface ist äußerst leistungsstark und kann eine Vielzahl von Aufgaben erledigen

　　　　　　Um ein Plugin zu verwenden, müssen Sie es mit require() laden und dann zur plugins-Array hinzufügen. Die meisten Plugins können über Optionen (Optionen) angepasst werden. Sie können auch denselben Plugin in einer Konfigurationsdatei mehrmals für verschiedene Zwecke verwenden, indem Sie ein neues Beispiel mit dem new-Operator erstellen.

　　　　　　Webpack bietet viele sofort einsatzbereite Plugins! Erfahren Sie mehr über die Plugin-Liste, um weitere Informationen zu erhalten. Für detaillierte Text- und Bildinformationen lesen Sie bitte die offiziellen Dokumente. https://doc.webpack-china.org/Konzepte/.

Zusammenfassung

Die oben genannten sind die Kernkonzepte (Wissenspunkte) des Webpack-Frameworks, die von mir vorgestellt werden. Ich hoffe, sie sind für Sie hilfreich. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht, ich werde rechtzeitig antworten. Ich danke auch sehr für die Unterstützung von呐喊教程!

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheberrecht des jeweiligen Autors. Der Inhalt wurde von Internetnutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie urheberrechtlich relevante Inhalte entdecken, sind Sie herzlich eingeladen, eine E-Mail an notice#w zu senden.3codebox.com (Bitte ersetzen Sie # durch @, wenn Sie eine E-Mail senden, um zu melden, und fügen Sie relevante Beweise bei. Sobald überprüft, wird diese Website die beanstandeten urheberrechtlichen Inhalte sofort löschen.)