JavaScript'теги Webpack чогулткучтун иштөө принциби

Адатта, иштеп чыгууда биздин коддун ар кандай бөлүктөрүн камтыган көптөгөн JavaScript файлдары пайда болот. Бул биздин коддун бөлүктөрү, же болбосо үчүнчү тараптын китепканалары болушу мүмкүн. Натыйжада, ар бир мындай файлды биз HTML файлына script теги аркылуу туташтырышыбыз керек.

Бул өтө жакшы эмес, анткени көптөгөн туташтырылган файлдар сайттын жүктөлүш ылдамдыгын азайтат. Ошондуктан жүктөлүштү тездетүү үчүн бардык кодду бир файлга топтоштуруу зарыл.

Бирок, кодду бир жалпы файлда иштеп чыгуу да өтө ыңгайлуу эмес. Ошондуктан азыркы учурда төмөнкү ыкма колдонулат: код өзүнчө файлдарда иштеп чыгылат, андан кийин чогулткучтун жардамы менен бир жалпы файлга топтолот, ал эми ошол файл HTML файлына туташтырылат.

Өзүнчө файлдар ES модулдарынан турат. Бул модулдар башка файлдарга import командасы аркылуу туташтырылат.

Адатта, негизги файл түзүлөт, ал файлга калган файлдар туташтырылат. Бул файл кириш чекити деп аталат.

Чогулткуч кириш чекитине кирет, анда кандай модулдар туташтырылганын карайт. Бул модулдарга дагы башка модулдар туташтырылышы мүмкүн. Чогулткуч бардык туташтырууларды ээрчип, бардык кодду бир файлга топтойт. Бул файл бандл деп аталат.

Адатта, программист жазып жаткан код, src папкасында жайгаштырылат, ал эми топтолгон код dist папкасына коюлат.

Чогулткуч ошондой эле топтолуу режимин жөнгө салууга мүмкүндүк берет. 'development' режими иштеп чыгуу процесси үчүн арналган. Ал кодду иштеп чыгууга ыңгайлуу кылып топтойт. 'production' режими ишке чыгарыла туркан акыркы код үчүн арналган. Бул режимде код анын көлөмүн кичирейтүү үчүн минификацияланат, ошондой эле жүктөлүш ылдамдыгын жогорулатуу үчүн.