Webpack ýygnagyjynyň iş prinsipi

Esasan, ösdüriş wagtynda bizde köplenç dürli kod böleklerini öz içine alýan köp JavaScript faýly peýda bolýar. Bu biziň kodymyzyň bölekleri, ýa-da üçünji tarap kitaphanalary bolup biler. Netijede, her bir şeýle faýly biz HTML faýlyna baglamaly script teginden geçirmelidiris.

Bu gowy däl, sebäbi köp birikdirilen faýllar saýtyň ýüklenme tizligini haýal edýär. Şonuň üçin ýüklenme tizligini artdyrmak üçin tutuş kody bir faýlda ýygnamaly.

Emma, kody bir umumy faýlda öndürmekem gaty amatly däl. Şonuň üçin häzirki wagtda aşakdaky ýanaşma ulanylýar: kod aýry-ayry faýllarda öndürilýär, soňra ýygnagyk ýardamynda bir umumy faýlda ýygnanylýar we şol HTML faýlyna birikdirilýär.

Aýry-ayry faýllar ES modullary bolup durýar. Bu modullary beýleki faýllara import buýrugy arkaly birikdirilýär.

Adatça, beýleki faýllaryň birikdirilýän esasy bir faýl döredilýär. Bu faýl girýän nokat diýlip atlandyrylýar.

Ýygnagyk girýän nokada girýär, oňa haýsy modullaryň birikdirilendigine seredýär. Bu modullara hem beýleki modullary birikdirilip bilner. Ýygnagyk tutuş birikdirmeler boýunça yzarlap tutuş kody bir faýlda ýygnap ýygýar. Bu faýl bundle diýlip atlandyrylýar.

Esasan, programmist ýazýan kod, src bukjasynda ýerleşýär, ýygnan kod bolsa dist bukjasyna ýerleşdirilýär.