Принцип на работа на сборщика Webpack

Като цяло, по време на разработка ние получаваме много JavaScript файлове, съдържащи различни части от кода. Това могат да бъдат части от нашия код, или странични библиотеки. Оказва се, че всеки такъв файл трябва да бъде свързан към HTML файла чрез тага script.

Това не е много добре, тъй като много свързани файлове забавят скоростта на зареждане на сайта. Затова, за да се ускори зареждането, е необходимо целият код да се сложи в един файл.

Обаче, разработването на код в един общ файл също не е много удобно. Затова в настоящо време се практикува следният подход: кодът се разработва в отделни файлове, а след това с помощта на сборщик се събира в един общ файл, който се свързва към HTML файла.

Отделните файлове представляват ES модули. Тези модули се свързват към други файлове чрез командата import.

Обикновено се създава някакъв основен файл, към който се свързват останалите файлове. Този файл се нарича входна точка.

Сборщикът влиза във входната точка, гледа какви модули са свързани към нея. Към тези модули също могат да бъдат свързани други модули. Сборщикът следва всички връзки и събира целия код в един файл. Този файл се нарича бандл.

Като правило, кодът, който пише програмистът, се намира в папка src, а сбореният код се поставя в папка dist.