JavaScript да Webpack йиғғичнинг ишлаш тартиби

Одатда, тараққиёт жараёнида бизда турли хил код бўлакларини ўз ичига олган кўп миқдорда JavaScript файллари бўлади. Бу бизнинг код бўлакларимиз ёки учунчи тараф кутубхоналари бўлиши мумкин. Натижада, ҳар бир бундай файлни биз HTML файлга script теги орқали улашимиз керак.

Бу жуда яхши эмас, чунки кўп миқдорда уланган файллар сайтнинг юкланиш тезлигини секинлаштиради. Шу сабабдан, юкланишни тезлаштириш учун барча кодни битта файлга жамлаш керак.

Аммо, битта умумий файлда код ёзиш ҳам жуда қулай эмас. Шу сабабдан, ҳозирги вақтда куйидаги ёндашув қўлланилида: код алохида файлларда ишлаб чиқилади, сўнгра йиғғич ёрдамида бир умумий файлга жамланади, ва ўша файл HTML файлга уланади.

Алохида файллар ES модулларини ташкил этади. Ушбу модуллар бошқа файлларга import буйруғи орқали уланади.

Одатда, айрим асосий файл яратилади, унга бошқа файллар уланади. Ушбу файл кириш нуқтаси деб аталади.

Йиғғич кириш нуқтасига киради, унга қайси модуллар уланганини кўради. Ушбу модулларга бошқа модуллар ҳам уланган бўлиши мумкин. Йиғғич барча уланмалар бўйлаб ҳаракат қилиб барча кодни битта файлга жамлайди. Ушбу файл бандл деб аталади.

Одатда, дастурчи ѕзган код src папкасида жойлашади, ва йиғилган код dist папкасига қўйилади.

Йиғғич шунингдек, йиғиш режимини тартибга солиш имконини беради. 'development' режими тараққиёт жараёни учун мўлжалланган. У тараққиёт учун қулай тарзда кодни жамлайди. 'production' режими ишга чиқариладиган яхъий код учун мўлжалланган. Ушбу режимда код унинг ҳажмини камайтириш ва юкланиш тезлигини ошириш учун минификацияланади.