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

Како по правило, при развојот ние добиваме многу JavaScript датотеки, кои содржат различни парчиња код. Ова може да бидат делови од нашиот код, или пак библиотеки од трети страни. Излегува дека секоја таква датотека треба да ја поврземе со HTML датотеката преку тагот script.

Ова не е многу добро, бидејќи многу поврзани датотеки ја забавуваат брзината на вчитување на веб-страницата. Затоа, за забрзување на вчитувањето, неопходно е целиот код да се собере во една датотека.

Сепак, развојот на кодот во една заедничка датотека исто така не е многу погоден. Затоа во моментов се практикува следниот пристап: кодот се развива во одделни датотеки, а потоа со помош на собирот се собира во една заедничка датотека, која се поврзува со HTML датотеката.

Одделните датотеки претставуваат ES модули. Овие модули се поврзани со други датотеки преку командата import.

Обично се создава некоја основна датотека, на која се поврзани останатите датотеки. Оваа датотека се нарекува влезна точка.

Собирот влегува во влезната точка, гледа кои модули се поврзани кон неа. Кон овие модули исто така може да бидат поврзани други модули. Собирот ги следи сите врски и го собира целиот код во една датотека. Оваа датотека се нарекува бандл.

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

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