Werking van de Webpack bundler in JavaScript

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 resultaat 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 snelheid van het laden van de site vertragen. Daarom is het voor het versnellen van het laden nodig om alle code in één bestand te plaatsen.

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

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

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

De bundler gaat naar het entry point, bekijkt 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 een bundle genoemd.

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

De bundler maakt het ook mogelijk om de buildmodus te regelen. De modus 'development' is bedoeld voor het ontwikkelproces. Hij verzamelt de code op een voor ontwikkeling handige manier. De modus 'production' is bedoeld voor de uiteindelijke code die in productie wordt genomen. In deze modus zal de code worden geminimaliseerd om de grootte ervan te verkleinen en de laadsnelheid te verhogen.