Webpack тўплагич ишлаш тартиби

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

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

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

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

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

Тўплагич кириш нуқтасига киради, уңга қайси модуллар уланганини кўради. Ушбу модулларга бошқа модуллар ҳам уланган бўлиши мумкин. Тўплагич барча уланishлар бўйича ҳаракат қилиб барча кодни битта файлга тўплайди. Ушбу файл бандл деб аталади.

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