Webpack bundlera darbības princips JavaScript

Parasti, izstrādājot, mums veidojas daudz JavaScript failu, kas satur dažādus koda fragmentus. Tie varētu būt mūsu koda daļas vai arī trešo pušu bibliotēkas. Izrādās, ka katrs šāds fails mums jāpievieno HTML failam caur script tagu.

Tas nav īsti 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, strādāt ar kodu vienā kopējā failā arī nav īsti ērti. Tāpēc šobrīd tiek pielietota šāda pielaide: kods tiek izstrādāts atsevišķos failos, un pēc tam, izmantojot bundleri, tiek savākts vienā kopējā failā, kas tiek pievienots HTML failam.

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

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

Bundleris ielodas 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.

Bundleris arī ļauj regulēt build režīmu. Režīms 'development' ir paredzēts izstrādes procesam. Tas savāc kodu izstrādei ērtā veidā. Režīms 'production' ir paredzēts gala kodam, kas tiks izvietots darbā. Šajā režīmā kods tiks minimizēts, lai samazinātu tā lielumu un palielinātu ielādes ātrumu.