Webpack

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.

Tipp

Wenn Sie noch Fragen bez├╝glich JavaScript haben, dann k├Ânnen Sie gerne den jeweiligen Glossar dazu besuchen und sich ├╝ber das Thema informieren.

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.

Welche Sprache wird verwendet?

Webpack ist ein Modul Bundler f├╝r JavaScript. Alle Quelldateien werden in JavaScript erzeugt. Diese Standardisierung tr├Ągt zur Effizienz der Software bei. Nichtsdestotrotz k├Ânnen auch Module geladen werden, die nicht als JavaScript-Modul zur Verf├╝gung steht. Daf├╝r setzt Webpack Modul Loader ein. Das entspricht dem hybriden Modell des Modul Bundlers. Auf diese Weise stehen alle Funktionen, die klassische Modul Loader haben, hier zur Verf├╝gung. Die Sprache, in der die gew├╝nschten Module bereitstehen, ist unter diesem Aspekt nahezu beliebig. Alle klassischen Programmiersprachen werden ├╝bersetzt. Diese Module werden dann durch die Modul Loader ad├Ąquat transformiert und stehen als JavaScript-Bibliothek zur Verf├╝gung. Im Kontext des Modul Bundlers wird aus jeder auf diese Weise geladenen Bibliothek ein eigenes Modul.

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.

Tipp

Wenn Sie noch Fragen bez├╝glich eines Online Marketing Themas haben, dann k├Ânnen Sie gerne unseren Glossar besuchen und sich ├╝ber das Thema informieren, wo Sie noch speziell Fragen haben.


Sie haben noch Fragen?

Kontaktieren Sie uns

Kostenloser SEO-Check der OSG


Weitere Inhalte