JavaScript-də Webpack qurucusunun iş prinsipi

Bir qayda olaraq, inkişaf zamanı bizdə müxtəlif kod parçalarını ehtiva edən çoxlu JavaScript faylları əmələ gəlir. Bu, bizim kodumuzun hissələri və ya üçüncü tərəf kitabxanaları ola bilər. Belə çıxır ki, hər bir belə faylı biz HTML faylına script teqi vasitəsilə birləşdirməliyik.

Bu, o qədər də yaxşı deyil, çünki çoxlu birləşdirilmiş fayllar saytın yüklənmə sürətini ləngidir. Buna görə də yüklənməni sürətləndirmək üçün bütün kodu bir faylda birləşdirmək lazımdır.

Lakin, kodu bir ümumi faylda inkişaf etdirmək də o qədər rahat deyil. Buna görə də hazırda aşağıdakı yanaşma tətbiq olunur: kod ayrı-ayrı fayllarda inkişaf etdirilir, sonra isə qurucu vasitəsilə bir ümumi faylda birləşdirilir, və həmin fayl HTML faylına birləşdirilir.

Ayrı fayllar ES modulları təşkil edir. Bu modullar digər fayllara import əmri vasitəsilə birləşdirilir.

Adətən, digər faylların birləşdirildiyi müəyyən əsas fayl yaradılır. Bu fayl giriş nöqtəsi adlanır.

Qurucu giriş nöqtəsinə daxil olur, ona hansı modulların birləşdirildiyinə baxır. Bu modullara da digər modullar birləşdirilə bilər. Qurucu bütün birləşmələr boyunca hərəkət edir və bütün kodu bir faylda birləşdirir. Bu fayl bəndl adlanır.

Bir qayda olaraq, proqramçının yazdığı kod src qovluğunda yerləşir, və yığılmış kod isə dist qovluğuna yerləşdirilir.

Qurucu həmçinin qurma rejimini tənzimləməyə imkan verir. 'development' rejimi inkişaf prosesi üçün nəzərdə tutulub. O, kodu inkişaf üçün əlverişli şəkildə yığır. 'production' rejimi isə işə buraxılacaq yekun kod üçün nəzərdə tutulub. Bu rejimdə kod onun ölçüsünü azaltmaq və yüklənmə sürətini artırmaq üçün minifikasiya olunacaq.