Sådan fungerer Webpack-bundleren i JavaScript

Som regel ender vi med at have mange JavaScript-filer, der indeholder forskellige stykker kode, når vi udvikler. Det kan være dele af vores egen kode eller tredjepartsbiblioteker. Det betyder, at vi skal inkludere hver eneste sådan fil i HTML-filen via et script-tag.

Det er ikke optimalt, fordi mange inkluderede filer bremser websitets indlæsningshastighed. For at forbedre indlæsningshastigheden er det derfor nødvendigt at samle al koden i én enkelt fil.

Det er dog heller ikke særlig praktisk at udvikle kode i én enkelt, stor fil. Derfor er den nuværende praksis som følger: koden udvikles i separate filer, og derefter samles den til én fælles fil ved hjælp af en bundler, som så inkluderes i HTML-filen.

De enkelte filer er ES-moduler. Disse moduler inkluderes i andre filer via kommandoen import.

Normalt oprettes der en hovedfil, hvor alle de andre filer inkluderes. Denne fil kaldes entry point.

Bundleren går ind i entry point, ser hvilke moduler der er inkluderet i den. Disse moduler kan også have andre moduler inkluderet i sig. Bundleren følger alle forbindelserne og samler al koden i én fil. Denne fil kaldes en bundle.

Som regel placeres den kode, som programmøren skriver, i mappen src, mens den samlede kode placeres i mappen dist.

Bundleren giver også mulighed for at styre build-tilstand. Tilstanden 'development' er beregnet til udviklingsprocessen. Den samler koden på en måde, der er praktisk for udvikling. Tilstanden 'production' er beregnet til den endelige kode, der skal sættes i produktion. I denne tilstand vil koden blive minificeret for at reducere dens størrelse og forbedre indlæsningshastigheden.