Webpack

Copyright © Shutterstock/CobraCZ

Was ist Webpack?

Webpack ist eine Software, die Module zu stabilen Paketen zusammenführt. Im Fachterminus nennt man die Pakete auch Bundles. Dementsprechend ist die Software Webpack ein Modul-Bundler. In den Modulen selbst werden Abhängigkeiten zu anderen Modulen oder anderen Objekten angegeben. Die Aufgabe des Modul-Bundlers ist es, daraus statische Objekte zu machen, die den Inhalt der Module in ihrer Gesamtheit repräsentiert.

Wozu braucht man einen Modul-Bundler

Es gibt viele Modul-Bundler, die in gängige Software-Projekte eingebunden werden. Oftmals haben sie nur die Aufgabe, Module zu laden und in das aktuelle Projekt einzubinden. Diese Komponenten werden auch als Modul-Loader bezeichnet. Beispiele sind RequireJS oder SystemJS, um Javascript-Module zu laden. Diese müssen in einer bestimmten Syntax vorliegen und werden dann direkt in das Projekt integriert.

Diese Aufgabe wird in der Laufzeitumgebung erledigt und somit zur Laufzeit eines Software-Projekts auf dem Server hergestellt. Modul-Bundler arbeiten anders. Sie laden und interpretieren ebenfalls Module, fügen sie aber vollständig in das Software-Projekt ein. Dies passiert nicht zur Laufzeit, sondern im Building-Prozess der Software. Zwei bekannte Beispiele für Module-Bundler im JavaScript-Umfeld sind Browserify und Webpack.

Was kann der Modul Bundler?

Webpack ist ein spezieller Modul-Bundler für große Projekte. Denn das Laden und Einfügen großer Klassen und Module führt zu einem sehr großen Produkt. Während andere Modul-Bundler alle diese Informationen in eine einzige Datei überführen, ist Webpack in der Lage, mehrere statische Dateien zu erzeugen. Die Abhängigkeiten zwischen diesen Dateien werden wieder wie bei Modul-Loadern üblich zur Laufzeit hergestellt. Um diese Trennung bewerkstelligen zu können, gibt es in einem Projekt sowohl synchrone als auch asynchrone Abhängigkeiten.

Bei dieser Vorgehensweise achtet Webpack insbesondere auf eine sinnvolle, fachgerechte Trennung dieser beiden Komponenten. Dadurch wird die Zeit, die für den initialen Aufruf des Projekts benötigt wird, im Gegensatz zu Modul-Loadern erheblich verringert. Es wird aber auch keine sehr große Enddatei erzeugt, die das gesamte Projekt repräsentiert. Aus diesem Grund ist der Modul Bundler vor allem für sehr große Projekte geeignet.

Wie funktioniert das Code Splitting?

Die Erstellung einer Zieldatei aus verschiedenen Quellen oder Modulen ist keine Herausforderung. Es werden alle Quellen final miteinander verbunden und in einer Quelldatei zur Verfügung gestellt. Je nach Größe der Quelldatei kann das für die Maschinenlesbarkeit allerdings ein Problem sein. Deshalb ergibt es Sinn, die statische Quelldatei zu splitten. Dann gibt es jedoch die Herausforderung, dass diese Dateien wieder wie Module orchestriert werden müssen. Das Code Splitting ist also als hybride Funktion zwischen den reinen Modul Loadern und den einzelnen statischen Quelldateien zu verstehen.

Die Qualität des Modul Bundlers ist also davon abhängig, wie sinnvoll das Splitting durchgeführt wird und wie performant die Dateien später orchestriert werden. Die Unterscheidung in synchrone und asynchrone Bereiche ist dabei der Schlüssel zum Erfolg von Webpack.

Jeder Bereich wird später zu einer eigenen Datei, die entweder bei der Initialisierung der Software oder bei Verwendung zur Laufzeit geladen wird. Da das Splitting individuell anpassbar ist, kann der Modul Bundler für unterschiedliche Bedürfnisse angepasst werden. Das kann zum Beispiel durch eine spezielle Infrastruktur gegeben sein.

Wie funktioniert die Übersetzung?

Wie bei Sprachen im philologischen Sinne hängt die Qualität der Quelldateien von der Übersetzungsqualität der Fremdbibliotheken ab. Webpack hat sich auf ein effizientes Parsing spezialisiert. Dadurch kann nahezu jede Fremdbibliothek in das JavaScript-Projekt eingebunden werden. Dafür stehen sogenannte Übersetzungstemplates zur Verfügung. In Webpack werden zwei der bekanntesten Modulstile verwendet, CommonJS und AMD. Die beiden Standards werden verwendet, um die Zieldateien zu formen.

Die einzelnen Funktionen werden also in den zugrunde liegenden Standards übersetzt und in die finalen Quelldateien eingefügt beziehungsweise als eigene Quelldatei angelegt. Die hohe Standardisierung führt zu einer hohen Genauigkeit und optimaler Transparenz. Das ist Teil der Erfolgsgeschichte von Webpack. Beide Standards sind notwendig, da CommonJS eher für die synchrone Kommunikation geeignet ist und AMD für die asynchrone Kommunikation. Da hier ein hybrides Vorgehen vorliegt, ist es Sinnvoll, beide Standards parallel zu verwenden.

Fortgeschrittene Webpack-Projekte

Webpack ist vor allem für sehr große Projekte geeignet. Dabei ergibt es Sinn, Funktionen zu konfigurieren oder gar zu erweitern. Denn vor allem große Projekte haben oftmals Anforderungen, die über allgemeine Standards hinausgehen. Dabei spielt es keine Rolle, ob es sich um interne Funktionen unter Webpack handelt oder zum Beispiel Visualisierungsfunktionen.

Der Modul Bundler ist selbst modular aufgebaut. Das bedeutet, die meisten Funktionen werden auch intern als Plugin zur Verfügung gestellt. Webpack ist also bereits auf den Import neuer Plugins vorbereitet. Deshalb kann es im eigenen JavaScript-Projekt um benötigte Funktionen erweitert werden.

Die Kernfunktionen stehen direkt zur Verfügung, alle weiteren können zusätzlich eingebunden werden. Der Individualisierung sind dabei keine Grenzen gesetzt. So können zum Beispiel eigene Plugins entwickelt werden, um den Anforderungen gerecht zu werden. Viele zusätzliche Funktionen stehen jedoch schon in Plugins zur Verfügung. Diese können häufig als Open Source Plugin bezogen werden.