Webpack'i kogumise põhimõte

Reeglina arenduse ajal saame palju JavaScript faile, mis sisaldavad erinevaid koodijuppe. Need võivad olla meie koodi osad või kolmandate osapoolte teegid. See tähendab, et iga sellist faili peame HTML-faili ühendama läbi script-sildi.

See pole eriti hea, kuna paljud ühendatud failid aeglustavad saidi laadimiskiirust. Seetõttu on kiiruse parandamiseks vaja kogu kood panna ühte faili.

Siiski pole ka väga mugav arendada koodi ühes üldfailis. Seetõttu kasutatakse praegu järgmist lähenemist: koodi arendatakse eraldi failides ja seejärel kogutakse kogumise abil ühte üldfaili, mis ühendatakse HTML-failiga.

Eraldi failid on ES moodulid. Need moodulid ühendatakse teiste failidega läbi käsu import.

Tavaliselt luuakse kindel põhifail, millele ühendatakse teised failid. Seda faili nimetatakse sisendpunktiks.

Koguja läheb sisendpunkti, vaatab, millised moodulid on ühendatud sellega. Nendele moodulitele võivad olla ühendatud ka teised moodulid. Koguja järgib kõiki ühendusi ja kogub kogu koodi ühte faili. Seda faili nimetatakse pakk (bundle).

Reeglina asub programmeerija poolt kirjutatud kood kaustas src, ja kogutud kood asetatakse kausta dist.