Was ist Webpack? Was ist der Nutzen?

Was ist Webpack? Wozu dient Webpack? Dieser Artikel wird Ihnen die Bedeutung von Webpack und die Verwendung von Webpack vorstellen. Freunde in Not können einen Blick darauf werfen.

Kommen wir ohne Umschweife gleich zur Sache~

Was ist Webpack?

Wir können der offiziellen Website entnehmen: Im Wesentlichen ist Webpack ein statischer Modul-Bundler (Modul-Bundler) für moderne JavaScript-Anwendungen. 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.

Um es einfach auszudrücken: WebPack kann als Modulpaketierer betrachtet werden: Es analysiert Ihre Projektstruktur und findet JavaScript-Module und andere Erweiterungssprachen, die Browser nicht direkt ausführen können (Scss, TypeScript). usw.) und verpacken Sie es in ein geeignetes Format für die Verwendung im Browser.

Also werfen wir einen Blick darauf Was nützt Webpack?

Lassen Sie uns zunächst kurz auf das Funktionsprinzip von Webpack eingehen:

In einer Konfigurationsdatei werden Aufgaben wie Kompilierung, Komprimierung und Kombination bestimmter Dateien festgelegt. Behandeln Sie Ihr Projekt als Ganzes, über eine bestimmte Hauptdatei (index.js). Webpack beginnt mit dieser Datei, um alle Abhängigkeitsdateien Ihres Projekts zu finden, verwendet Loader, um sie zu verarbeiten, und packt es schließlich in einen Browser, der es erkennen kann es ist eine js-Datei.

Das Konzept von Webpack besteht darin, dass alles modular ist. Fügen Sie eine Reihe von CSS- und JS-Dateien in eine allgemeine Eintragsdatei ein, führen Sie sie über require ein und Webpack übernimmt den Rest, einschließlich der Vorher- und Nachher-Abhängigkeiten von Alle Module verbinden, verpacken, komprimieren, in eine js-Datei zusammenführen, allgemeinen Code in eine js-Datei extrahieren und einige selbst spezifizierte js separat verpacken. Das Modul kann css/js/imsge/font usw. sein.

Sehen wir uns die Verwendung von Webpack im Detail an

1. Webpack kann HTML basierend auf der Vorlage generieren und den oben genannten CSS/JS-Referenzpfad automatisch verarbeiten

2 kann den Bildpfad in , den Pfad des Hintergrundbilds in CSS und die Schriftartreferenz automatisch verarbeiten

3 Webpack kann den lokalen Server öffnen und den Seiteninhalt automatisch aktualisieren, während der Code neu geschrieben wird

4, Webpack kann jsx es6 sass weniger Coffescript usw. kompilieren und MD5, Sourcemap und andere Unterstützung hinzufügen

5. Webpack kann Inhalte asynchron laden und nicht in DOM laden, wenn sie nicht benötigt werden

6. Webpack kann mit Framework-Entwicklungen wie vue.js und React.js zusammenarbeiten.

Dieser Artikel endet hier. Weitere Informationen zu Webpack finden Sie auf der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonWas ist Webpack? Was ist der Nutzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!