Webpack 5 training

The aim of the course is to teach participants how to use the Webpack 5 build tool, which is mainly used to build SPAs (Single Page Applications).

Through practical examples, participants will learn how to use Webpack 5 and how to build an application and optimize it for different environments.

They will be able to build a SPA and MPA (Multi Page Application), i.e. they will learn how to process different types of files and how to build an application from the source files.

Do you have advanced knowledge of HTML, CSS and JavaScript and want to learn how to use Webpack module bundler, still one of the most popular build tools? Then this is the place for you! After Webpack, learning any other similar tool (Rollup, ESBuild, Vite, etc.) will be much easier and faster.

By learning Webpack, you will also get an insight into what goes on behind the scenes, i.e. how some frameworks work, what's behind the scenes, how the code is put together in a way that is understandable for the browser.

• The mode, input and output configurations
• The dev and prod mode
• Using webpack DevServer
• Loaders, connecting the babel-loader
• The .browserslistrc configuration file
• The devtool configuration, source map generation
• The watch mode, monitoring file changes
• The contenthash in the filename, caching
• HtmlWebpackPlugin and the clean option
• Processing CSS files with style-loader and css-loader
• Save to CSS file using MiniCssExtractPlugin
• Development and production environments with separate configuration file
• Configure development and production environments within one file
• Using ESLint to improve JavaScript code quality
• Using Stylelint to improve CSS code quality
• The PostCSS loader
• Importing images into a JavaScript file
• Asset Modules I - Managing images
• Asset modules II - Images with base64 encoding
• Asset modules III - Managing text files
• CSS background images and the assetModuleFilename setting
• Using the Font Awesome icon set
• Using custom fonts
• Copy static files with CopyWebpackPlugin
• Using TerserPlugin to minify JS code
• Using MiniCssExtractPlugin to minify CSS code
• Optimizing images with imagemin
• Using the performance settings
• The Webpack Bundle Analyzer - visualizing the bundle structure
• Optimizing the bundle size
• Analyzing the runtime of loaders, plugins using the Speed Measure Plugin
• Using nodemon with webpack
• Specifying multiple entry points
• MPA application
• Chunks and the SplitChunksPlugin
• Naming chunks and the cacheGroup option
• The runtime chunk
• Using CompressionWebpackPlugin to compress files
• The sass-loader for handling SASS/SCSS files
• Handling TS, JSX, TSX files

Advanced HTML, CSS and JavaScript