Practical Webpack 5 - Course Overview

Webpack is a module bundler tool for modern Javascript applications. Webpack, along with its ecosystem, helps you to compile and optimize your source code. It makes our Javascript runnable on browsers, fast and safe. Webpack solves lots of problems but it comes with a cost: there are lots of configurations. How can we know which configuration to use and when to use them? Will these loaders and plugins be best fit for my application? How can I make my over-3-year-old Javascript app load faster? What is Webpack vs Babel? And more. In this course, I will walk you through the most important ideas of Webpack and we will answer the above questions together.
The course begins with an overview of a typical modern Javascript app using webpack. We will take a glimpse of it first then we will go right into details in next sections. You will learn how to import (or require) your assets like CSS, images, fonts, etc into your Javascript source code. Next you will learn how to set up loaders to compile your ES6+ or even Typescript. Further, we will look into how to set up Webpack with React, VueJS or Angular. After that, you will learn how to set up webpack plugin, and development environment with Hot Module Replacement. Moreover, you will learn how to optimize your source code using bundle analyzer tool, minify tool and get your hands on tree shaking. Eventually, once our source code grows big enough, you need to look into lazy load and code splitting. Moreover, you will learn how to set up a Micro Frontend project structure using Webpack Federation. Finally, the last section shows you how to integrate Webpack configuration to NodeJS/Express server and make sure our code is secure by setting up nonce and Content Security Policies.
By the end of the course, you will be able to build your own Javascript app or customize exist Webpack project with ease.