Webpack bundlera darbības princips

Parasti izstrādes laikā mums veidojas daudz JavaScript failu, kuros atrodas dažādi koda fragmenti. Tie var būt mūsu pašu koda daļas vai arī trešo pušu bibliotēkas. Rezultātā katrs šāds fails ir jāpievieno HTML failam caur script tagu.

Tas nav īpaši labi, jo daudz pievienotu failu palēnina vietnes ielādes ātrumu. Tāpēc, lai paātrinātu ielādi, visu kodu nepieciešams salikt vienā failā.

Tomēr arī strādāt ar kodu vienā kopējā failā nav īpaši ērti. Tāpēc šobrīd tiek pielietota šāda pieeja: kods tiek izstrādāts atsevišķos failos, un pēc tam, izmantojot bundleri, tiek savākts vienā kopējā failā, kuru arī pievieno HTML failam.

Atsevišķie faili ir ES moduļi. Šie moduļi tiek pievienoti citiem failiem ar komandu import.

Parasti tiek izveidots kāds galvenais fails, kuram tiek pievienoti pārējie faili. Šo failu sauc par ieejas punktu.

Bundleris ielodējas ieejas punktā, skatās, kuri moduļi tam ir pievienoti. Arī šiem moduļiem var būt pievienoti citi moduļi. Bundleris seko visiem savienojumiem un savāc visu kodu vienā failā. Šo failu sauc par bundle.

Parasti kods, ko raksta programmētājs, atrodas mapē src, bet savāktais kods tiek ievietots mapē dist.