Hur Webpack-byggverktyget fungerar

Som regel får vi under utvecklingen många JavaScript-filer som innehåller olika delar av koden. Detta 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.

Detta är inte särskilt bra, eftersom många inlästa 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 gemensam fil är inte heller särskilt bekvämt. Därför tillämpas följande förhållningssätt för närvarande: koden utvecklas i separata filer, och sedan med hjälp av ett byggverktyg samlas den i en gemensam fil, som inkluderas i HTML-filen.

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

Vanligtvis skapas en huvudfil som alla andra filer inkluderas i. Denna fil kallas entry point.

Byggverktyget går in i entry point, ser vilka moduler som är inkluderade i den. Till dessa moduler kan också andra moduler vara inkluderade. Byggverktyget följer alla kopplingar och samlar all kod i en fil. Denna fil kallas bundle.

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