Webpack'i kogumise põhimõte JavaScriptis

Tavaliselt on meil arenduse ajal palju JavaScript faile, mis sisaldavad erinevaid koodijuppe. Need võivad olla meie enda koodi osad või kolmandate osapoolte teegid. Selgub, et iga sellist faili peame me HTML-faili ühendama läbi script sildi.

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

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

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

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

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

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

Koguja võimaldab ka reguleerida koostamise režiimi. Režiim 'development' on mõeldud arendusprotsessiks. See kogub koodi arenduseks mugaval viisil. Režiim 'production' on mõeldud lõplikuks koodiks, mis pannakse tööle. Selle režiimi korral kood minifitseeritakse, et vähendada selle suurust ja suurendada laadimiskiirust.