Webpack – od nuly až po funkční balení webové aplikace (WBPCK)

Programování, Webové technologie

Webpack je aplikace postavená na Node.js, díky které můžete ve webové aplikaci využít moduly z Node.js. A nejen to. Můžete použít i ES moduly nebo importovat assety (obrázky, CSS, písma) jako by to byly kusy JavaScriptu. Výsledkem je balíček, který můžete použít rovnou v prohlížeči na webové stránce. Na začátku je tedy Node.js, Webpack, Javascript, CSS, nějaké obrázky a písma a na konci je hotová webovka.
Díky nastavení a různým pluginům a modulům ještě můžeme využít preprocesory CSS (LESS, SASS), transpilaci do nižších verzí JavaScriptu a polyfilly (díky čemuž náš moderní kód spustíme i v IE 10) či kontrolu pravidel psaní CSS a JS kódu.
Webpack není určen jen pro balení, ale i pro vývoj.
Na tomto školení se dozvíte, jak nainstalovat, spustit a nakonfigurovat Webpack, aby za vás udělal maximum práce jak při vývoji webové stránky, tak při tvorbě produkčního kódu. Začneme na nule a na konci kurzu budete míz hotový kompletní boilerplate, který okamžitě budete moci zakomponovat do svého workflow.

Lokalita, termín kurzu



Virtuálně se můžete přidat i ke školením ve výše nabízených lokalitách. Do poznámky v objednávce prosím uveďte „Připojím se virtuálně“

Náplň kurzu:

Skrýt detaily
  • Úvod
    1. Instalace
    2. První spuštění
    3. Jak to vlastně funguje
  • Základní konfigurace
    1. Spuštění bez konfigurace Základní konfigurační soubor
  • Assety (zdroje)
    1. CSS
    2. Fonty
    3. Obrázky
    4. Minifikace obrázků
    5. Statická data (json, csv, xml)
  • Řízení a distribuce výstupu
    1. Více koncových souborů
    2. Šablona pro HTML stránku
    3. Cachování souborů
    4. Vyčištění složky s produkčními soubory
  • Vývoj s Webpackem
    1. Zdrojové mapy
    2. Watching
    3. Reloading webové stránky
  • Pomocné prostředky a optimalizace
    1. Statistiky
    2. Deduplikace
    3. Lazy loading skriptů
  • Nezávislá konfigurace pro vývoj a produkci
    1. Princip konfigurace
    2. Společná část
  • Vlastní balení
    1. Vlastní polyfilly
    2. Babel: transpilace do ES5- a polyfilly
    3. Lintování CSS a JS (kontrola dodržení pravidel při psaní kódu)
    4. Preprocesory CSS (LESS, příp. SASS), autoprefixer
    5. CSS v samostatném souboru
    6. Vylepšení minifikace CSS a JS
    7. Nabídnutí javascritptu pro starší prohlížeče (s polyfilly)
Předpokládané znalosti:
JavaScript na pokročilejší úrovni HTML a kaskádových stylů, výhodou je znalost moderního JavaScriptu (moduly), Node.js, CSS preprocesorů (LESS, SAAS).
Doporučený předchozí kurz:
Javascript pro pokročilé a Node.js (JVS2)
Časový rozvrh:
2 dny (9:00hod. - 17:00hod.)
Cena kurzu:
11 800,00 Kč (14 278,00 Kč včetně 21% DPH)