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

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

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

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

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

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

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

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