Princip rada sakupljača Webpack u JavaScriptu

Kao pravilo, tokom razvoja mi dobijemo mnogo JavaScript fajlova, koji sadrže različite delove koda. Ovo mogu biti delovi našeg koda, ili strane biblioteke. Ispada da svaki takav fajl moramo da povežemo sa HTML fajlom preko taga script.

To nije baš dobro, jer mnogo povezanih fajlova usporava brzinu učitavanja sajta. Zato je za ubrzanje učitavanja neophodno sav kod spojiti u jedan fajl.

Međutim, razvijati kod u jednom zajedničkom fajlu takođe nije baš zgodno. Zbog toga se trenutno praktikuje sledeći pristup: kod se razvija u odvojenim fajlovima, a zatim se pomoću sakupljača sakuplja u jedan zajednički fajl, koji se i povezuje sa HTML fajlom.

Odvojeni fajlovi predstavljaju ES module. Ovi moduli se povezuju na druge fajlove preko komande import.

Obično se kreira neki osnovni fajl, na koji se povezuju ostali fajlovi. Ovaj fajl se zove tačka ulaza.

Sakupljač ulazi u tačku ulaza, gleda koji moduli su povezani na nju. Na ove module takođe mogu biti povezani drugi moduli. Sakupljač prati sve veze i sakupi sav kod u jedan fajl. Ovaj fajl se zove bundle.

Kao pravilo, kod koji piše programer, nalazi se u fascikli src, a sakupļjeni kod se stavlja u fasciklu dist.

Sakupljač takođe dozvoljava regulisanje režima sklapanja. Režim 'development' je namenjen za proces razvoja. On sklapa kod na zgodan način za razvoj. Režim 'production' je namenjen za krajnji kod, koji će biti postavljen u rad. U ovom režimu kod će biti minifikovan, da bi se smanjila njegova veličina i povećala brzina učitavanja.