Princíp činnosti zostavovača Webpack v JavaScripte

Spravidla pri vývoji máme veľa JavaScript súborov, ktoré obsahujú rôzne časti kódu. Môžu to byť časti nášho kódu alebo knižnice tretích strán. To znamená, že každý takýto súbor musíme pripojiť k HTML súboru prostredníctvom tagu script.

Nie je to veľmi dobré, pretože veľa pripojených súborov spomaľuje rýchlosť načítania stránky. Preto na zrýchlenie načítania je potrebné umiestniť celý kód do jedného súboru.

Avšak, vyvíjať kód v jednom spoločnom súbore tiež nie je veľmi pohodlné. Preto v súčasnosti sa praktizuje nasledujúci prístup: kód sa vyvíja v samostatných súboroch a potom sa pomocou zostavovača zozbiera do jedného spoločného súboru, ktorý sa pripojí k HTML súboru.

Samostatné súbory predstavujú ES moduly. Tieto moduly sú pripájané k iným súborom prostredníctvom príkazu import.

Zvyčajne sa vytvorí nejaký hlavný súbor, ku ktorému sú pripojené ostatné súbory. Tento súbor sa nazýva vstupný bod.

Zostavovač prejde do vstupného bodu, pozrie sa, ktoré moduly sú k nemu pripojené. K týmto modulom môžu byť tiež pripojené ďalšie moduly. Zostavovač prechádza všetkými pripojeniami a zhromažďuje celý kód do jedného súboru. Tento súbor sa nazýva bandl.

Spravidla sa kód, ktorý programátor píše, nachádza v priečinku src, a zostavený kód sa umiestni do priečinka dist.

Zostavovač tiež umožňuje regulovať režim zostavenia. Režim 'development' je určený pre proces vývoja. Zostavuje kód spôsobom vhodným pre vývoj. Režim 'production' je určený pre výsledný kód, ktorý bude zverejnený do prevádzky. V tomto režime bude kód minifikovaný, aby sa zmenšila jeho veľkosť a zvýšila rýchlosť načítania.