Načelo delovanja zbiralnika Webpack v JavaScriptu

Praviloma imamo med razvojem veliko JavaScript datotek, ki vsebujejo različne dele kode. To so lahko deli naše kode ali knjižnice tretjih oseb. Posledično moramo vsako takšno datoteko povezati v HTML datoteko prek oznake script.

To ni ravno dobro, saj veliko povezanih datotek upočasni hitrost nalaganja spletnega mesta. Zato je za pospešitev nalaganja potrebno vso kodo združiti v eno datoteko.

Vendar tudi razvijanje kode v eni skupni datoteki ni zelo priročno. Zato se trenutno uporablja naslednji pristop: koda se razvija v ločenih datotekah, nato pa se z zbiralnikom zbere v eno skupno datoteko, ki se poveže z HTML datoteko.

Posamezne datoteke so ES moduli. Ti moduli se povežejo z drugimi datotekami prek ukaza import.

Običajno ustvarimo neko glavno datoteko, ki se vanjo povežejo preostale datoteke. Ta datoteka se imenuje vstopna točka.

Zbiralnik gre v vstopno točko, pogleda, kateri moduli so povezani nanjo. Tudi na te module so lahko povezani drugi moduli. Zbiralnik sledi vsem povezavam in zbere vso kodo v eno datoteko. Ta datoteka se imenuje bundle (paket).

Praviloma se koda, ki jo piše programer, nahaja v mapi src, zbrana koda pa se postavi v mapo dist.

Zbiralnik omogoča tudi nastavitev načina zbiranja. Način 'development' je namenjen procesu razvoja. Kodo zbere na način, primeren za razvoj. Način 'production' je namenjen končni kodi, ki bo objavljena v delovanje. V tem načinu bo koda minificirana, da zmanjša njeno velikost in poveča hitrost nalaganja.