Részvételi forma

Képzési forma

Mentorált

Képzés hossza

2 nap (2×8 tanóra)
naponta 9:00 - 17:00

Időpontok

Képzés ára

171 000 Ft
+ ÁFA/fő -től
Szeretne a témában testre szabott megoldást, csoportos képzést?
Egyedi képzési szolgáltatásainkról részletesen itt olvashat.

Ismertető

A tanfolyam célja, hogy a résztvevők megtanulják használni a Webpack 5 build eszközt, mely segítségével főként SPA-kat (Single Page Application) állathatnak össze.

A tanfolyam során gyakorlati példák alapján a résztvevők elsajátítják a Webpack 5 használatát és megtanulják, hogy kell egy alkalmazást összeállítani, és a különböző környezeteknek megfelelően optimalizálni.

Képesek lesznek egy SPA és MPA (Multi Page Application) lebuildelésére, azaz megismerik, hogy a különböző típusú fájlokat hogyan kell feldolgozni, és hogyan áll össze a forrásfájlokból az alkalmazás.

Kinek ajánljuk?

Rendelkezel haladó szintű HTML, CSS és JavaScript ismeretekkel, és szeretnéd megismerni a még mindig az egyik legnépszerűbb build eszközt, a Webpack module bundler-t? Akkor itt a helyed! A Webpack után már bármelyik másik hasonló eszköz (Rollup, ESBuild, Vite, stb.) megismerése sokkal egyszerűbb és gyorsabb lesz.

A Webpack megismerésével bepillantást nyersz abba is, mi van a színfalak mögött, azaz egyes keretrendszerek hogyan is működnek, mi van a háttérben, hogyan áll össze a böngésző számára is értelmezhető kód.

Tematika

  • A mode, az entry és output konfigurációk
  • A dev és prod mód
  • A webpack DevServer használata
  • Loader-ök, a babel-loader bekötése
  • A .browserslistrc konfigurációs fájl
  • A devtool konfiguráció, source map generálása
  • A watch mód, fájlok módosulásának figyelése
  • A contenthash a fájlnévben, gyorsítótárazás
  • A HtmlWebpackPlugin és a clean opció
  • A CSS-fájlok feldolgozása a style-loader és a css-loader segítségével
  • CSS-fájlba mentés a MiniCssExtractPlugin használatával
  • A development és a production környezetek külön konfigurációs fájllal
  • A development és a production környezetek konfigurálása egy fájlon belül
  • Az ESLint használata a JavaScript-kódminőség javítása érdekében
  • A Stylelint használata a CSS-kódminőség javítása érdekében
  • A PostCSS loader
  • Képek importálása JavaScript-fájlba
  • Asset Modules I. - Képek kezelése
  • Asset modules II. - Képek base64-kódolással
  • Asset modules III. - Szöveges állományok kezelése
  • CSS-háttérképek és az assetModuleFilename beállítás
  • A Font Awesome ikonkészlet használata
  • Saját betűtípusok használata
  • Statikus állományok másolása a CopyWebpackPlugin-nal
  • A TerserPlugin használata a JS-kód minify-olásához
  • A MiniCssExtractPlugin használata a CSS-kód minify-olásához
  • Képek optimalizálása az imageminnel
  • A performance beállítások használata
  • A Webpack Bundle Analyzer - a bundle felépítésének vizualizálása
  • A bundle méretének optimalizálása
  • A loader-ök, pluginok futásidejének elemzése a Speed Measure Plugin használatával
  • A nodemon használata a webpack-kel
  • Több belépési pont megadása
  • MPA alkalmazás
  • Chunkok és a SplitChunksPlugin
  • A chunkok elnevezése és a cacheGroup opció
  • A runtime chunk
  • A CompressionWebpackPlugin használata fájlok tömörítéséhez
  • A sass-loader SASS-/SCSS-fájlok kezelésére
  • A TS-, JSX-, TSX-fájlok kezelése

Szükséges előképzettség

Haladó HTML, CSS és JavaScript