Webpack 5: Optimizing For Production

Optimize your Webpack 5 configuration for Production with Code Splitting, Lazy Loading, Gzip compression etc.

What you'll learn
Quickly get started, without long introductions and rambling
Optimize your Webpack builds for production to be small and fast
Learn 7 ways of handling CSS in your apps (including CSS-in-JS and CSS Modules)
Everything you need to know about Code Splitting and Lazy Loading
Optimize your CSS and Images for production
Configure Gzip compression and Brotli compression
Set up Babel the right way
Add Source Maps both for JavaScript and CSS
Configure TypeScript with Webpack
Optimize your development experience by enabling Hot Module Replacement, better Error Handling, etc
Requirements
Basics of JavaScript
Basics of CSS
Description
Hi guys and girls, nice to see you here :) This is my 2nd course about Webpack, and this time my goal is to help you understand how you can optimize your Webpack configurations for production use cases. In this course we are going to focus on how to make your Webpack bundles as small as possible, and how to make your application loading times as fast as possible.This course is specifically designed for those people who already know some Webpack basics, and want to become experts in creating optimized Webpack configurations from scratch as well as improving existing Webpack configurations.In this course we are going to take an existing web application that's not using any kind of module bundlers, and apply various Webpack features in order to optimize this application and improve its loading performance. This means you will see how Webpack works in real world use cases. Each lesson builds on top of the previous ones, so it’s very easy to follow.Here are just a few examples of what we are going to talk about.In one of the sections, I will show you 7 different approaches of handling CSS in your applications, including CSS Modules and a couple of CSS-in-JS libraries. As a result, you will become familiar with many approaches and you will be able to choose the most suitable one for your specific needs.In another section, we are going to have a long discussion about Code Splitting. Webpack is extremely good at Code Splitting, and we are going to talk about that a lot in this course. I will show you multiple Code Splitting strategies you can apply, and we will even define our own strategy applicable to the application we are developing in this course. After watching this course you won't ever be frustrated when you hear the words "Code Splitting" again.Also, we are going to cover topics related to Tree Shaking, Lazy Loading, Compressing generated bundles, and many more! After watching this course you will definitely have some ideas on how to improve performance of your existing web applications. I can also promise that you will know more about Webpack than the average Front End Developer in your company.I am regularly updating this course, so you can be sure that this course is always up-to-date and covers the latest Webpack features.If you have any questions regarding Webpack, feel free to post them in the Q&A section. Many people have already found answers to their questions in Q&A, and I will be more than happy to help you with your questions as well.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 What you need for this course

Section 2: Setting Up Webpack

Lecture 3 Setting Up Initial Application

Lecture 4 Integrating Webpack Into The Application

Lecture 5 Default Webpack Configuration

Lecture 6 Separating Code Into Multiple Files

Lecture 7 Different Configurations for Production and Development Builds

Lecture 8 Setting Up Webpack-Dev-Server

Section 3: 7 Ways Of Using CSS With Webpack

Lecture 9 Handling Styles With Webpack

Lecture 10 Using Regular CSS With Webpack. Brief Info About Loaders

Lecture 11 Extracting Generated CSS Into Its Own Bundle

Lecture 12 Generating HTML Based On Your Custom Template

Lecture 13 Removing Obsolete Bundles Before Generating New Ones

Lecture 14 CSS Modules

Lecture 15 Optimizing Your CSS

Lecture 16 Using Less Preprocessor For Writing Your Styles

Lecture 17 Using Sass Together With Webpack

Lecture 18 Using PostCSS

Lecture 19 Removing Unused CSS From The Generated Bundles

Lecture 20 Introduction To CSS-in-JS

Lecture 21 Using JSS

Lecture 22 Using Emotion (Another CSS-in-JS Library)

Lecture 0 Introduction To Images

Lecture 0 Processing Images In Development Mode

Lecture 0 Optimizing Images For Production

Lecture 0 Setting Up Babel Compiler

Lecture 0 Increasing Your Browser Support By Adding Polyfills

Lecture 0 Different Babel Configurations For Different Environments

Lecture 0 Using Experimental JavaScript Features In Your Application

Lecture 0 Setting Up TypeScript

Lecture 0 Source Maps For JavaScript And CSS

Lecture 0 Source Maps For CSS-in-JS Libraries

Lecture 0 How Tree Shaking Works. Simple Example

Lecture 0 Applying Tree Shaking To Our Application

Lecture 0 Adding Bootstrap In Case You Need It

Lecture 0 How To Analyze Bundles Generated By Webpack

Lecture 0 Strategy #1: Extracting Heavy Dependencies Into Separate Bundles

Lecture 0 Strategy #2: Specifying Criteria For Code Splitting

Lecture 0 Strategy #3: Putting node_modules Into Its Own Bundle

Lecture 0 Strategy #4: Creating a JS Bundle For Each Dependency

Lecture 0 Define Your Own Strategy For Code Splitting

Lecture 0 Lazy Loading

Lecture 0 Lazy Loading Of Multiple Modules In Parallel

Lecture 0 Using Async Await With Lazy Loaded Modules

Lecture 0 Why You May Need a Web Server

Lecture 0 Setting Up Express Framework

Lecture 0 Integrating Express Framework Into The Application

Lecture 0 Implementing "Watch" Functionality And Automatic Rebuilds

Lecture 0 Implementing Hot Module Reloading Feature

Lecture 0 GZIP Compression

Lecture 0 Enable GZIP Compression in Express Framework

Lecture 0 Enable Brotli Compression in Express Framework

Lecture 0 Summary

All developers with basic JavaScript knowledge