Funktionsprinzip von Webpack

In der Regel erhalten wir bei der Entwicklung zahlreiche JavaScript-Dateien, die verschiedene Code-Schnipsel enthalten. Dies können Teile unseres eigenen Codes oder Fremdbibliotheken sein. Das bedeutet, dass wir jede dieser Dateien über ein script-Tag in der HTML-Datei einbinden müssen.

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

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

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

Normalerweise 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. An diese Module können wiederum andere Module angeschlossen sein. Der Bundler folgt allen Verbindungen 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.