JavaScript-da Webpack yig'uvchisining ishlash prinsipi

Odatda, dasturlash paytida bizda turli xil kod bo'laklarini o'z ichiga olgan ko'plab JavaScript fayllari bo'ladi. Bular bizning kodimizning qismlari yoki uchinchi tomon kutubxonalari bo'lishi mumkin. Shunday qilib, har bir bunday faylni biz HTML fayliga script tegi orqali ulashimiz kerak.

Bu unchalik yaxshi emas, chunki ko'p ulangan fayllar sayt yuklanish tezligini sekinlashtiradi. Shuning uchun yuklanishni tezlashtirish uchun barcha kodni bitta faylga joylash kerak.

Biroq, kodni bitta umumiy faylda ishlab chiqish ham unchalik qulay emas. Shuning uchun hozirgi vaqtda quyidagi yondashuv qo'llaniladi: kod alohida fayllarda ishlab chiqiladi, keyin yig'uvchi yordamida bitta umumiy faylga yig'iladi, va shu fayl HTML fayliga ulanadi.

Alohida fayllar ES modullarini ifodalaydi. Ushbu modullar boshqa fayllarga import buyrug'i orqali ulanadi.

Odatda, asosiy boshqa fayllarga ulangan biron bir asosiy fayl yaratiladi. Ushbu fayl kirish nuqtasi deb ataladi.

Yig'uvchi kirish nuqtasiga kiradi, unga qaysi modullar ulanganligini ko'radi. Ushbu modullarga boshqa modullar ham ulangan bo'lishi mumkin. Yig'uvchi barcha ulanishlar bo'ylab harakatlanadi va barcha kodni bitta faylga yig'adi. Ushbu fayl bundle (bandl) deb ataladi.

Odatda, dasturch yozadigan kod src papkasida joylashgan bo'ladi, va yig'ilgan kod dist papkasiga joylashadi.

Yig'uvchi, shuningdek, yig'ish rejimini boshqarishga imkon beradi. 'development' rejimi dasturlash jarayoni uchun mo'ljallangan. U kodni dasturlash uchun qulay tarzda yig'adi. 'production' rejimi ishga tushiriladigan yakuniy kod uchun mo'ljallangan. Ushbu rejimda kod uning hajmini kamaytirish va yuklanish tezligini oshirish uchun minifikatsiya qilinadi.