JavaScript-те Webpack жинақтағыштың жұмыс принципі

Әдетте, әзірлеу кезінде бізде әртүрлі код бөліктерін қамтитын көптеген JavaScript файлдары пайда болады. Бұл біздің кодтың бөліктері болуы мүмкін, немесе үшінші тарап кітапханалары. Барлық осындай файлдарды біз HTML файлына script тегі арқылы қосуымыз керек.

Бұл өте жақсы емес, себебі көптеген қосылған файлдар сайттың жүктелу жылдамдығын баяулатады. Сондықтан жүктелуді жеделдету үшін барлық кодты бір файлға біріктіру қажет.

Алайда, кодты бір жалпы файлда әзірлеу де өте ыңғайлы емес. Сондықтан қазіргі уақытта келесі тәсіл қолданылады: код жеке файлдарда әзірленеді, содан кейін жинақтағыш көмегімен бір жалпы файлға жинақталады, және сол файл HTML файлына қосылады.

Жеке файлдар ES модульдері болып табылады. Бұл модульдер басқа файлдарға import командасы арқылы қосылады.

Әдетте қалған файлдар қосылатын негізгі файл жасалады. Бұл файл кіру нүктесі деп аталады.

Жинақтағыш кіру нүктесіне кіреді, оған қандай модульдер қосылғанын қарайды. Бұл модульдерге де басқа модульдер қосылған болуы мүмкін. Жинақтағыш барлық қосылымдар бойынша жүріп барлық кодты бір файлға жинайды. Бұл файл бандел деп аталады.

Әдетте, бағдарламашы жазатын код src бумасында орналасады, ал жинақталған код dist бумасына орналастырылады.

Жинақтағыш сонымен қатар жинау режимін реттеуге мүмкіндік береді. 'development' режимі әзірлеу процесі үшін арналған. Ол кодты әзірлеуге ыңғайлы түрде жинайды. 'production' режимі жұмысқа шығарылатын соңғы код үшін арналған. Бұл режимде кодтың көлемін азайтып, жүктелу жылдамдығын арттыру үшін код минификацияланады.