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