Princip fungování bundleru Webpack v JavaScriptu

Při vývoji obvykle máme mnoho JavaScript souborů, které obsahují různé části kódu. Mohou to být části našeho kódu nebo knihovny třetích stran. To znamená, že každý takový soubor musíme připojit k HTML souboru pomocí tagu script.

To není příliš dobré, protože mnoho připojených souborů zpomaluje rychlost načítání webu. Pro urychlení načítání je proto nutné veškerý kód složit do jednoho souboru.

Vývoj kódu v jednom společném souboru ale také není příliš pohodlný. Proto se v současnosti praktikuje následující přístup: kód se vyvíjí v samostatných souborech a poté se pomocí bundleru sloučí do jednoho společného souboru, který je připojen k HTML souboru.

Jednotlivé soubory představují ES moduly. Tyto moduly jsou připojeny k jiným souborům pomocí příkazu import.

Obvykle se vytvoří určitý hlavní soubor, ke kterému jsou připojeny ostatní soubory. Tento soubor se nazývá vstupní bod.

Bundler vstoupí do vstupního bodu, prohlédne si, jaké moduly jsou k němu připojeny. K těmto modulům mohou být také připojeny další moduly. Bundler následuje všechna propojení a shromažďuje veškerý kód do jednoho souboru. Tento soubor se nazývá bundle.

Kód, který programátor píše, se obvykle nachází ve složce src, a sestavený kód je umístěn ve složce dist.

Bundler také umožňuje regulovat režim sestavení. Režim 'development' je určen pro proces vývoje. Sestavuje kód způsobem vhodným pro vývoj. Režim 'production' je určen pro výsledný kód, který bude nasazen do provozu. V tomto režimu bude kód minifikován, aby se zmenšila jeho velikost a zvýšila rychlost načítání.