Prinsippet for hvordan Webpack-byggverktøyet fungerer i JavaScript

Som regel får vi mange JavaScript-filer under utvikling 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 optimalt, ettersom mange inkluderte filer reduserer hastigheten på nettsidens lasting. Derfor, for å akselerere lastingen, er det nødvendig å sette sammen all koden i én fil.

Likevel er det ikke særlig praktisk å utvikle kode i én felles fil heller. Derfor praktiseres følgende tilnærming for tiden: koden utvikles i separate filer, og deretter settles den sammen til én felles fil ved hjelp av et byggverktøy, som deretter inkluderes i HTML-filen.

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

Vanligvis opprettes en hovedfil som alle de andre filene kobles til. Denne filen kalles inngangspunkt.

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

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

Byggverktøyet lar deg også regulere byggemodus. Modusen 'development' er beregnet for utviklingsprosessen. Den setter sammen koden på en måte som er praktisk for utvikling. Modusen 'production' er beregnet for den endelige koden som vil blive lagt ut i produksjon. I denne modusen vil koden bli minifisert for å redusere størrelsen og øke lastehasitgheten.