A Webpack csomagoló működési elve

Általában a fejlesztés során sok JavaScript fájlunk keletkezik, amelyek a kód különböző részeit tartalmazzák. Ezek lehetnek saját kódjaink részei, vagy külső könyvtárak. Ez azt jelenti, hogy minden ilyen fájlt csatolnunk kell a HTML fájlhoz a script tag segítségével.

Ez nem túl jó, mivel a sok csatolt fájl lassítja a weboldal betöltési sebességét. Ezért a gyorsabb betöltés érdekében az összes kódot egyetlen fájlba kell összefogni.

Azonban a kód fejlesztése egy közös fájlban sem túl kényelmes. Ezért jelenleg a következő megközelítést alkalmazzák: a kódot külön fájlokban fejlesztik, majd egy csomagoló segítségével egyetlen közös fájlba gyűjtik össze, amelyet aztán csatolnak a HTML fájlhoz.

A különálló fájlok ES modulokként működnek. Ezeket a modulokat más fájlokhoz a import parancs segítségével csatoljuk.

Általában létrehozunk egy fő fájlt, amelyhez a többi fájl csatlakozik. Ezt a fájlt nevezzük belépési pontnak.

A csomagoló a belépési pontba lép, megnézi, hogy mely modulok vannak hozzá csatolva. Ezekhez a modulokhoz további modulok is csatlakozhatnak. A csomagoló követi az összes kapcsolatot és az összes kódot egyetlen fájlba gyűjti. Ezt a fájlt bundle-nek (kötegnek) nevezzük.

Általában a programozó által írt kód a src mappában található, míg az összeállított kód a dist mappába kerül.