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

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

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

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

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

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

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

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

Сборщикът също така позволява регулирането на режима на сборка. Режимът 'development' е предназначен за процеса на разработка. Той събира кода по удобен за разработка начин. Режимът 'production' е предназначен за крайния код, който ще бъде качен в работа. В този режим кодът ще бъде минифициран, за да се намали неговият размер и да се увеличи скоростта на зареждане.