Werking van de Webpack bundler

Over het algemeen krijgen we tijdens de ontwikkeling veel JavaScript-bestanden, die verschillende stukjes code bevatten. Dit kunnen delen van onze eigen code zijn, of externe bibliotheken. Het gevolg is dat we elk van deze bestanden moeten koppelen aan het HTML-bestand via de script-tag.

Dit is niet erg goed, omdat veel aangesloten bestanden de laadsnelheid van de website vertragen. Om de laadsnelheid te verbeteren, is het daarom nodig om alle code in één bestand te plaatsen.

Echter, het is ook niet erg handig om code te ontwikkelen in één gemeenschappelijk bestand. Daarom wordt tegenwoordig de volgende aanpak gehanteerd: code wordt ontwikkeld in aparte bestanden, en vervolgens met behulp van een bundler verzameld in één gemeenschappelijk bestand, dat wordt gekoppeld aan het HTML-bestand.

De afzonderlijke bestanden zijn ES-modules. Deze modules worden gekoppeld aan andere bestanden via het commando import.

Meestal wordt een hoofdbestand gemaakt, waaraan de andere bestanden worden gekoppeld. Dit bestand wordt het entry point genoemd.

De bundler gaat naar het entry point, kijkt welke modules er zijn aangesloten. Aan deze modules kunnen ook andere modules zijn gekoppeld. De bundler volgt alle verbindingen en verzamelt alle code in één bestand. Dit bestand wordt de bundle genoemd.

Over het algemeen bevindt de code die de programmeur schrijft zich in de map src, en de gebundelde code wordt geplaatst in de map dist.