Webpack ýygnagynyň JavaScript-de işleş prinsipi

Esasan, öndürişde bizde köp sanly JavaScript faýllary bolýar, olarda dürli kod bölekleri bar. Bu biziň kodymyzyň bölekleri, ýa-da üçünji tarap kitaphanalary bolup biler. Şeýlelikde, her bir şeýle faýly biz HTML faýlyna baglamaly bolýarys script tegi arkaly.

Bu gaty gowy däl, sebäbi köp birikdirilen faýllar saýtyň ýükleniş tizligini ýawaşladýar. Şonuň üçin ýükleniş tizligini artdyrmak üçin ähli kody bir faýlda jemižmek zerur.

Emma, kody bir umumy faýlda öndürmekem gaty amatly däl. Şonuň üçin häzirki wagtda aşakdaky ýol tutulýar: kod aýry-aýry faýllarda ýazylyp, soňra ýygnag kömegi bilen bir umumy faýlda ýygnanyp, şol faýl HTML faýlyna birikdirilýär.

Aýry-aýry faýllar ES modullaryny emele getirýär. Bu modullary beýleki faýllara import buýrugy arkaly birikdirilýär.

Adatda bir esasy faýl döredilýär, ol ýere galan faýllar birikdirilýär. Bu faýla giriş nokady diýilýär.

Ýygnag giriş nokadyna girer, onyň nähili modullary birikdirilenligine görýär. Bu modullary hem beýleki modullara birikdirilen bolup biler. Ýygnag ähli birikmeleri yzarlap ähli kody bir faýlda ýygnap alýar. Bu faýla bundle (bandl) diýilýär.

Esasan, programmir ýazan kod, src bukjasynda ýerleşýär, ýygnanan kod bolsa dist bukjasyna ýerleşdirilýär.

Ýygnag hem ýygnaýyş režimini düzmäge mümkinçilik berýär. 'development' režimi öndüriş prosesi üçin niýetlenendir. Ol kody öndüriş üçin amatly görnüşde ýygnap alýar. 'production' režimi netijeli kod üçin niýetlenendir, oňa işe goýlar. Bu režimde kod minimalleşdiriler, ýagny onuň göwrümi kiçeldiler we ýükleniş tizligi artdyrylar.