Webpack 5: Optimizing For Production

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: What you need for this course

Chapter 2: Setting Up Webpack

Lecture 1: Setting Up Application

Lecture 2: Quick Note About The Github Repository

Lecture 3: Integrating Webpack Into The Application

Lecture 4: Default Webpack Configuration

Lecture 5: Separating Code Into Multiple Files

Lecture 6: Different Configurations for Production and Development Builds

Lecture 7: Setting Up Webpack-Dev-Server

Chapter 3: 7 Ways Of Using CSS With Webpack

Lecture 1: Introduction To Different Ways Of Handling Styles

Lecture 2: Using Regular CSS With Webpack. Brief Info About Loaders

Lecture 3: Extracting Generated CSS Into a Separate Bundle

Lecture 4: Generating HTML Based On Your Custom Template

Lecture 5: Removing Old Bundles Before Generating New Ones

Lecture 6: Another Way Of Removing Old Bundles

Lecture 7: CSS Modules

Lecture 8: Optimizing Your CSS For Production

Lecture 9: Using Less Preprocessor For Writing Your Styles

Lecture 10: Using Sass Together With Webpack

Lecture 11: Using PostCSS

Lecture 12: Removing Unused CSS From The Generated Bundles

Lecture 13: Introduction To CSS-in-JS

Lecture 14: Using JSS

Lecture 15: Using Emotion (Another CSS-in-JS Library)

Chapter 4: Processing Images With Webpack

Lecture 1: Introduction To Processing Images

Lecture 2: Processing Images In Development Mode

Lecture 3: Optimizing Images For Production

Lecture 4: One More Way Of Optimizing Images

Lecture 5: Processing Large Amounts of Images

Lecture 6: Generating WEBP Images Out Of JPEG or PNG

Lecture 7: Quick Note About Optimizing Images

Chapter 5: Increasing Browser Support With Babel

Lecture 1: Setting Up Babel Compiler

Lecture 2: Increasing Your Browser Support With Polyfills

Lecture 3: Different Babel Configurations For Production And Development Purposes

Lecture 4: Passing Environment Variables

Lecture 5: Using Experimental JavaScript Features In Your Application

Lecture 6: Setting Up TypeScript

Chapter 6: Improving Your Developer Experience With Source Maps

Lecture 1: Source Maps For JavaScript And CSS

Lecture 2: Source Maps For CSS-in-JS Libraries

Chapter 7: Tree Shaking

Lecture 1: How Tree Shaking Works. Simple Example

Lecture 2: Applying Tree Shaking To Our Application

Chapter 8: Applying Code Splitting and Lazy Loading To Your Production Code

Lecture 1: Adding Bootstrap In Case You Need It

Lecture 2: How To Analyze Bundles Generated By Webpack

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

Lecture 4: Strategy #2: Specifying Criteria For Code Splitting

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

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

Lecture 7: Define Your Own Strategy For Code Splitting

Lecture 8: Lazy Loading

Lecture 9: Lazy Loading Multiple Modules In Parallel

Lecture 10: Using Async Await With Lazy Loaded Modules

Chapter 9: Creating Your Own Web Server

Lecture 1: Why You May Need a Web Server

Lecture 2: Setting Up Express Framework

Lecture 3: Integrating Express Framework Into The Application

Lecture 4: Implementing "Watch" Functionality And Automatic Rebuilds

Lecture 5: Implementing Hot Module Replacement

Chapter 10: Compressing Your Production Code Before Sending It To Your Customers

Lecture 1: Enable Gzip Compression in Webpack

Lecture 2: Configure Your Web Server To Support Gzip

Lecture 3: Enable Brotli Compression

Chapter 11: Summary

Lecture 1: Summary