logo

Co je Webpack? Jednoduše řečeno.

Co je Webpack?

Kdysi dávno existoval pouze HTML . HTML byl jediným stavebním kamenem celého webu.

Pak přišel JavaScript, ale jeho použití bylo velmi jednoduché a minimální. Mohli byste vidět webové stránky s „VELKÝM“ balíčkem JavaScriptu:

<script>
alert("Welcome to my website")
</script>

Dnes se všude používá nejen JavaScript, ale existují i ​​některé frameworky (např. React), kde uživatel nezíská ze serveru žádný HTML kód (pouze prázdný soubor)! Získá balík JavaScriptu, který se přenese do HTML (a někdy také CSS) prohlížečem uživatele.

V dnešní době se každopádně musíme vypořádat a zvládnout spoustu JavaScriptového kódu a zde přichází na řadu Webpack.

Když se zabýváme velkým množstvím kódu, chceme náš kód rozdělit na malé kousky. Díky tomu je náš kód čitelnější a udržitelnější. Pravděpodobně již znáte syntaxi import-export. Toto je dělení kódu.

Nakonec ale budeme chtít transformovat všechny naše soubory do (obvykle) jednoho velkého balíku. Tento balíček by měl být optimalizován a měl by fungovat (polyfill) ve všech prohlížečích, ve kterých očekáváme, že náš kód poběží.

Webpack přesně to dělá. Poběží po dobu sestavení a vytvoří optimalizovaný balíček vašeho kódu (-small-sized bundle). Může například změnit název vašich proměnných z:

const example = 10;

Na:

var e = 10;

To je optimalizováno, protože zabírá méně paměti (méně písmen k ukládání) a běží rychleji v prohlížeči (jsou to rychlejší jádro JavaScriptu).

Dalším aspektem, jak již bylo zmíněno, je Polyfilling. Můžeme nakonfigurovat nastavení našeho Webpacku tak, aby náš kód běžel v prohlížečích, které pro něj definujeme. To se ve skutečnosti provádí pomocí jiné knihovny (obvykle Babel).

Ve výše uvedeném příkladu Webpack mění klíčové slovo const na var, aby fungovalo ve více prohlížečích.

Pojďme si projít základní konfiguraci Webpacku pro aplikaci React (otevřete přiložený obrázek vedle sebe).

  • Vstup - cíl položky je hlavní soubor, u kterého chceme, aby Webpack zahájil sdružování. Musíme zadat pouze jeden soubor a Webpack zjistí zbytek hledáním jeho závislostí. Zde specifikujeme soubor index.js, což je místo, kde vykreslíme naši aplikaci v Reactu (a všechny ostatní soubory jsou jen jeho sourozenci).

  • Výstup - je cesta, kde chceme, aby náš svazek byl. Zadáme název adresáře (zde je to dist) a můžeme také zadat název souboru, který chceme vytisknout.

  • Nakladače - Webpack není moc chytrý. Rozumí pouze souborům JS a JSON. Pokud chceme, aby Wepback rozuměl například JSX, musíme specifikovat loadery, které to pro Webpack přeloží. Zde specifikujeme babel-loader a nastavíme jeho možnosti pro práci s JSX (React).

  • Pluginy - To nám pomáhá optimalizovat náš kód a manipulovat s aktivy. V našem příkladu používáme HtmlWebpackPlugin. Tento plugin vygeneruje soubor HTML a automaticky do něj vloží náš balíček JS.

Nebojte se svého Webpacku. Je to skvělý nástroj a měli byste se s ním dostatečně seznámit, abyste v něm mohli provádět změny v konfiguraci.
Doporučuji vám jít a hrát si s Webpack.

  • Pro více podobných příspěvků mě sledujte na LinkedIn

  • Pracuji jako frontend a vývojář obsahu pro Bit – nástrojový řetězec pro vývoj řízený komponentami (Zapomeňte na monolitické aplikace a distribuujte do softwaru řízeného komponentami).