Hur Webpack-byggverktyget fungerar i JavaScript

Som regel får vi vanligtvis många JavaScript-filer när vi utvecklar, som innehåller olika delar av koden. Det kan vara delar av vår egen kod, eller tredjepartsbibliotek. Det betyder att varje sådan fil måste vi inkludera i HTML-filen via taggen script.

Det här är inte särskilt bra, eftersom många inkluderade filer saktar ner hastigheten för webbplatsens laddning. Därför, för att påskynda laddningen, är det nödvändigt att samla all kod i en fil.

Men att utveckla kod i en enda generell fil är inte särskilt bekvämt heller. Därför tillämpar man för närvarande följande tillvägagångssätt: koden utvecklas i separata filer, och sedan samlas den med hjälp av ett byggverktyg ihop till en generell fil, som inkluderas i HTML-filen.

De separata filerna är ES-moduler. Dessa moduler inkluderas i andra filer via kommandot import.

Vanligtvis skapar man en huvudfil, som alla andra filer inkluderas i. Den här filen kallas ingångspunkt.

Byggverktyget går in i ingångspunkten, tittar på vilka moduler som är inkluderade i den. Till dessa moduler kan också andra moduler vara inkluderade. Byggverktyget följer alla inkluderingar och samlar all kod i en fil. Den här filen kallas bundle.

Som regel placeras koden som programmeraren skriver i mappen src, och den samlade koden placeras i mappen dist.

Byggverktyget låter dig också reglera byggläget. Läget 'development' är avsett för utvecklingsprocessen. Det bygger koden på ett sätt som är bekvämt för utveckling. Läget 'production' är avsett för den färdiga koden som kommer att läggas ut i produktion. I detta läge kommer koden att minifieras för att minska dess storlek och öka laddningshastigheten.