Webpack ist ein Frontend-Tool zum Laden/Bündeln von Ressourcen. Es führt eine statische Analyse basierend auf Modulabhängigkeiten durch und generiert dann aus diesen Modulen gemäß den angegebenen Regeln entsprechende statische Assets.

Dieses Kapitel wurde basierend auf Webpack 3.0 getestet und verifiziert.

Aus dem Diagramm können wir ersehen, dass Webpack mehrere statische Ressourcen wie js, css und less in eine einzige statische Datei umwandeln kann, wodurch Seitenanfragen reduziert werden.

Im Folgenden stellen wir kurz die Installation und Verwendung von Webpack vor.

Webpack installieren

Bevor Sie Webpack installieren, muss Ihre lokale Umgebungnode.js unterstützen。

Da die npm-Installation langsam ist, verwendet dieses Tutorial den Taobao-Spiegel und dessen Befehl cnpm. Für Installations- und Nutzungsanweisungen siehe:Verwendung des Taobao-NPM-Spiegels。

Installieren Sie webpack mit cnpm:

Projekt erstellen

Als Nächstes erstellen wir ein Verzeichnis app:

Fügen Sie im Verzeichnis app eine Datei example1.js mit dem folgenden Code hinzu:

Fügen Sie im Verzeichnis app eine Datei index.html mit dem folgenden Code hinzu:

Als Nächstes verwenden wir den webpack-Befehl zum Bündeln:

Die Ausführung des obigen Befehls kompiliert die Datei example1.js und erzeugt eine Datei bundle.js. Bei Erfolg lautet die Ausgabe wie folgt:

Hash: a41c6217554e666594cb
Version: webpack 1.12.13
Time: 50ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
   [0] ./example1.js 29 bytes {0} [built]

Öffnen Sie index.html im Browser; das Ausgabeergebnis sieht wie folgt aus:

Erstellen Sie eine zweite JS-Datei

Als Nächstes erstellen wir eine weitere JS-Datei example2.js mit dem folgenden Code:

Aktualisieren Sie die Datei example1.js mit dem folgenden Code:

Als Nächstes verwenden wir den webpack-Befehl zum Bündeln:

Rufen Sie es im Browser auf, und das Ausgabeergebnis sieht wie folgt aus:

webpack führt eine statische Analyse basierend auf Modulabhängigkeiten durch, und diese Dateien (Module) werden in die Datei bundle.js aufgenommen. Webpack weist jedem Modul eine eindeutige id zu und verwendet diese id, um das Modul zu indizieren und darauf zuzugreifen. Wenn die Seite startet, wird zuerst der Code in example1.js ausgeführt, und andere Module werden ausgeführt, wenn require ausgeführt wird.

LOADER

Webpack selbst kann nur JavaScript-Module verarbeiten. Wenn Sie andere Dateitypen verarbeiten müssen, müssen Sie Loader für die Konvertierung verwenden.

Wenn wir also CSS-Dateien zu unserer Anwendung hinzufügen müssen, müssen wir css-loader und style-loader verwenden. Sie tun zwei verschiedene Dinge: css-loader durchläuft CSS-Dateien, findet url()-Ausdrücke und verarbeitet sie; style-loader fügt den ursprünglichen CSS-Code in ein style-Tag in die Seite ein.

Als Nächstes verwenden wir den folgenden Befehl, um css-loader und style-loader zu installieren (eine globale Installation erfordert den Parameter -g).

Nach Ausführung des obigen Befehls wird ein node_modules-Verzeichnis im aktuellen Verzeichnis erzeugt. Es ist das Installationsverzeichnis für css-loader und style-loader.

Als Nächstes erstellen Sie eine style.css-Datei mit dem folgenden Code:

Ändern Sie die Datei example1.js mit dem folgenden Code:

Als Nächstes verwenden wir den webpack-Befehl zum Bündeln:

Rufen Sie es im Browser auf, und das Ausgabeergebnis sieht wie folgt aus:

Beim Anfordern von CSS-Dateien müssen Sie das Loader-Präfix schreiben!style-loader!css-loader!Natürlich können wir den benötigten Loader automatisch anhand des Modultyps (Erweiterung) binden. Ändern Sie in der Datei example1.jsrequire("!style-loader!css-loader!./style.css")Ändern Sie zurequire("./style.css") ：

Führen Sie dann aus:

Rufen Sie es im Browser auf, und das Ausgabeergebnis sieht wie folgt aus:

Offensichtlich haben diese beiden Arten der Verwendung von Loadern denselben Effekt.

Konfigurationsdatei

Wir können einige Kompilierungsoptionen in einer Konfigurationsdatei zur einheitlichen Verwaltung ablegen:

Erstellen Sie eine webpack.config.js-Datei mit dem folgenden Code:

Als Nächstes müssen wir nur den webpack-Befehl ausführen, um die Datei bundle.js zu erzeugen:

Nachdem der webpack-Befehl ausgeführt wurde, lädt er standardmäßig die Datei webpack.config.js im aktuellen Verzeichnis.

Plugins

Plugins werden in der Option plugins der webpack-Konfiguration angegeben und dienen dazu, Aufgaben zu erledigen, die Loader nicht erledigen können.

Webpack wird mit einigen integrierten Plugins geliefert, und über cnpm können zusätzliche Plugins installiert werden.

Um integrierte Plugins zu verwenden, müssen Sie sie mit dem folgenden Befehl installieren:

Zum Beispiel können wir das integrierte Plugin BannerPlugin installieren, um oben in der Datei einige Kommentarinformationen auszugeben.

Ändern Sie webpack.config.js mit dem folgenden Code:

Führen Sie dann aus:

webpack

Öffnen Sie bundle.js, und Sie können die Kommentarinformationen sehen, die wir oben in der Datei angegeben haben.

Entwicklungsumgebung

Je größer das Projekt wird, desto länger wird die Kompilierungszeit von webpack. Sie können Parameter verwenden, damit die Kompilierungsausgabe Fortschritt und Farben enthält.

Wenn Sie nicht jedes Mal neu kompilieren möchten, wenn ein Modul geändert wird, können Sie den Watch-Modus aktivieren. Nachdem der Watch-Modus aktiviert wurde, werden unveränderte Module nach der Kompilierung im Speicher zwischengespeichert und nicht jedes Mal neu kompiliert, sodass die Gesamtgeschwindigkeit des Watch-Modus sehr hoch ist.

Natürlich können wir den Entwicklungsserver webpack-dev-server verwenden. Auf diese Weise können wir über localhost:8080 einen express-Webserver für statische Assets starten, und er führt webpack automatisch im Watch-Modus aus. Wenn Sie http://localhost:8080/ oder http://localhost:8080/webpack-dev-server/ im Browser öffnen, können Sie die Seiten des Projekts und die kompilierte Asset-Ausgabe durchsuchen. Er lauscht außerdem in Echtzeit über einen socket.io-Dienst auf Änderungen und aktualisiert die Seite automatisch.

Öffnen Sie http://localhost:8080/ im Browser, und das Ausgabeergebnis lautet wie folgt: