Princip fungování bundleru Webpack

Během vývoje obvykle vzniká mnoho JavaScript souborů, které obsahují různé části kódu. Může se jednat o části našeho kódu nebo o knihovny třetích stran. To znamená, že každý takový soubor musíme do HTML souboru připojit pomocí tagu script.

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

Vyvíjet kód v jednom společném souboru však 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ý se připojí k HTML souboru.

Jednotlivé soubory představují ES moduly. Tyto moduly jsou do jiných souborů připojovány 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, podívá se, jaké moduly jsou k němu připojeny. K těmto modulům mohou být také připojeny další moduly. Bundler prochází všemi připojeními 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.