Képzési forma:
Képzés hossza:
2 nap (16 óra)
Tananyag nyelve:
Magyar
2022.
december
13.
Képzési forma:
Képzés hossza:
2 nap (16 óra)
Képzés nyelve:
Magyar/Angol
Képzési forma:
Normál
Képzés hossza:
2 nap (16 óra)
Képzés nyelve:
Magyar/Angol

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.

Az 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.

  • 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

Haladó HTML, CSS, és JavaScript