Prinsippet for hvordan Webpack-byggverktøyet fungerer

Som regel ender vi opp med mange JavaScript-filer når vi utvikler, som inneholder ulike deler av koden. Dette kan være deler av vår egen kode, eller tredjepartsbiblioteker. Det betyr at vi må inkludere hver slik fil i HTML-filen via script-taggen.

Dette er ikke veldig bra, fordi mange inkluderte filer reduserer hastigheten på nettsidens lasting. Derfor, for å øke lastehastigheten, er det nødvendig å sette sammen all koden i én fil.

Men det er heller ikke veldig praktisk å utvikle kode i én felles fil. Derfor praktiseres følgende tilnærming for tiden: koden utvikles i separate filer, og deretter samles den med et byggverktøy til én felles fil, som inkluderes i HTML-filen.

De separate filene representerer ES-moduler. Disse modulene inkluderes i andre filer via kommandoen import.

Vanligvis oppretter man en hovedfil som alle de andre filene inkluderes i. Denne filen kalles inngangspunkt.

Byggverktøyet går inn i inngangspunktet, ser hvilke moduler som er inkludert i den. Disse modulene kan også ha andre moduler inkludert i seg. Byggverktøyet følger alle tilkoblingene og samler all koden i én fil. Denne filen kalles bundle.

Som regel ligger koden som utvikleren skriver, i mappen src, mens den samlede koden plasseres i mappen dist.