Webpack Bundlerens Arbejdsprincip

Som regel har vi under udviklingen mange JavaScript-filer, der indeholder forskellige stykker kode. Disse kan være dele af vores egen kode eller tredjepartsbiblioteker. Det betyder, at vi skal tilføje hver sådan fil til HTML-filen via script-tagget.

Dette er ikke optimalt, da mange tilsluttede filer bremser hastigheden af webstedets indlæsning. For at accelerere indlæsningen er det nødvendigt at samle al koden i én fil.

Det er dog heller ikke særlig praktisk at udvikle kode i én fælles fil. Derfor anvendes i øjeblikket følgende tilgang: koden udvikles i separate filer, og derefter samles den ved hjælp af en bundler til én fælles fil, som tilføjes til HTML-filen.

De enkelte filer er ES-moduler. Disse moduler tilføjes til andre filer via kommandoen import.

Normalt oprettes der en hovedfil, som de andre filer tilføjes til. Denne fil kaldes entry point.

Bundleren går ind i entry point, ser hvilke moduler der er tilføjet til den. Der kan også være andre moduler tilføjet til disse moduler. Bundleren følger alle tilføjelser og samler al koden i én fil. Denne fil kaldes en bundle.

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