Webpack surinkimo principas JavaScript

Paprastai, kurdami, mes turime daug JavaScript failų, kuriuose yra įvairūs kodo fragmentai. Tai gali būti mūsų kodo dalys arba trečiųjų šalių bibliotekos. Pasirodo, kad kiekvieną tokį failą turime prijungti prie HTML failo per script žymą.

Tai nėra labai gerai, nes daug prijungtų failų sulėtina svetainės įkėlimo greitį. Todėl, norint pagreitinti įkėlimą, reikia visą kodą sudėti į vieną failą.

Tačiau kurti kodą viename bendrame faile taip pat nėra labai patogu. Todėl šiuo metu taikomas toks požiūris: kodas kuriamas atskiruose failuose, o tada, naudojant surinkėją, surenkamas į vieną bendrą failą, kuris ir yra prijungiamas prie HTML failo.

Atskiri failai yra ES moduliai. Šie moduliai yra prijungiami prie kitų failų per komandą import.

Paprastai sukuriamas tam tikras pagrindinis failas, prie kurio prijungiami kiti failai. Šis failas vadinamas įėjimo tašku.

Surinkėjas patenka į įėjimo tašką, žiūri, kokie moduliai prijungti prie jo. Prie šių modulių taip pat gali būti prijungti kiti moduliai. Surinkėjas seka visais prijungimais ir surenka visą kodą į vieną failą. Šis failas vadinamas bundle (ryšuliu).

Paprastai kodas, kurį rašo programuotojas, yra src aplanke, o surinktas kodas patalpinamas į dist aplanką.

Surinkėjas taip pat leidžia reguliuoti surinkimo režimą. Režimas 'development' skirtas kūrimo procesui. Jis surenka kodą patogiu kūrimui būdu. Režimas 'production' skirtas galutiniam kodui, kuris bus paskelbtas darbe. Šiuo režimu kodas bus sumažintas (minifikuotas), kad būtų sumažintas jo dydis ir padidintas įkėlimo greitis.