Funktionsweise des Webpack-Bundlers in JavaScript

In der Regel entstehen bei der Entwicklung viele JavaScript-Dateien, die verschiedene Code-Schnipsel enthalten. Das können Teile unseres Codes oder Fremdbibliotheken sein. Somit müssten wir jede dieser Dateien über ein script-Tag in der HTML-Datei einbinden.

Das ist nicht optimal, da viele eingebundene Dateien die Ladegeschwindigkeit der Website verlangsamen. Um die Ladezeit zu verbessern, ist es daher notwendig, den gesamten Code in einer Datei zusammenzufassen.

Allerdings ist es auch nicht sehr praktisch, Code in einer einzigen gemeinsamen Datei zu entwickeln. Daher hat sich heutzutage folgender Ansatz durchgesetzt: Der Code wird in separaten Dateien entwickelt und dann mit Hilfe eines Bundlers in eine gemeinsame Hauptdatei gebündelt, die in die HTML-Datei eingebunden wird.

Die einzelnen Dateien sind ES-Module. Diese Module werden in anderen Dateien über den Befehl import eingebunden.

Üblicherweise wird eine Hauptdatei erstellt, in die die anderen Dateien eingebunden werden. Diese Datei wird Einstiegspunkt genannt.

Der Bundler betritt den Einstiegspunkt, prüft, welche Module darin eingebunden sind. In diese Module können ebenfalls andere Module eingebunden sein. Der Bundler folgt allen Verknüpfungen und fasst den gesamten Code in einer Datei zusammen. Diese Datei wird Bundle genannt.

In der Regel befindet sich der Code, den der Programmierer schreibt, im Ordner src, und der gebündelte Code wird im Ordner dist abgelegt.

Der Bundler erlaubt es auch, den Build-Modus zu steuern. Der Modus 'development' ist für den Entwicklungsprozess bestimmt. Er baut den Code auf eine für die Entwicklung günstige Weise. Der Modus 'production' ist für den finalen Code bestimmt, der in Betrieb genommen wird. In diesem Modus wird der Code minifiziert, um seine Größe zu reduzieren und die Ladegeschwindigkeit zu erhöhen.