Webpack 5: The Complete Guide For Beginners

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: What you need for this course

Chapter 2: Initial Setup and Integrating Webpack

Lecture 1: Why Do We Need Webpack

Lecture 2: Setting Up Our Application

Lecture 3: Installing Webpack

Lecture 4: Small Note about Github Repository

Lecture 5: Integrating Webpack Into Our JS Application

Lecture 6: Custom Webpack Configuration

Chapter 3: Asset Modules

Lecture 1: Introduction to Asset Modules

Lecture 2: Handling Images With Webpack

Lecture 3: What is publicPath?

Lecture 4: Asset/inline Module Type

Lecture 5: General Asset Type

Lecture 6: Asset/source Module Type

Chapter 4: Loaders

Lecture 1: What Is Webpack Loader?

Lecture 2: Handling CSS With Webpack

Lecture 3: Handling SASS

Lecture 4: Using Latest JavaScript Features With Babel

Lecture 5: Experimental JavaScript Features

Chapter 5: Plugins

Lecture 1: What Is Webpack Plugin?

Lecture 2: Minification of the Resulting Webpack Bundle

Lecture 3: Extracting CSS Into a Separate Bundle With mini-css-extract-plugin, Part 1

Lecture 4: Extracting CSS Into a Separate Bundle, Part 2

Lecture 5: Browser Caching

Lecture 6: How To Clean Dist Folder Before Generating New Bundles

Lecture 7: Generating HTML Files Automatically During Webpack Build Process

Lecture 8: Customizing Generated HTML Files

Lecture 9: Integration with Handlebars

Lecture 10: More Webpack Plugins

Chapter 6: Production vs Development Builds

Lecture 1: Introduction

Lecture 2: Mode

Lecture 3: Managing Webpack Config for Production and Development Use Cases

Lecture 4: Faster Development with webpack dev server

Lecture 5: Cleaning Up A Bit

Chapter 7: Multiple Page Applications and Code Splitting

Lecture 1: Introduction

Lecture 2: Creating KiwiImage Component

Lecture 3: Code Splitting in Webpack: Multiple JS and CSS Bundles

Lecture 4: How To Generate Multiple HTML Files

Lecture 5: Extracting Common Dependencies While Code Splitting

Lecture 6: Setting Custom Options for Code Splitting

Lecture 7: How To Setup Development Environment For Multiple Page Application

Chapter 8: Github Repository

Lecture 1: How To Use Github Repository

Chapter 9: Webpack Integration With Node And Express

Lecture 1: Introduction

Lecture 2: Getting Code for Single Page Application

Lecture 3: Integrating Express Into Our Application

Lecture 4: Serving HTML Pages via Express

Lecture 5: Handling JS and CSS via Express

Lecture 6: Getting Code for Multiple Page Application

Lecture 7: Integrating Express.js Into A Multiple Page Application

Chapter 10: Module Federation

Lecture 1: Creating 2 Separate Applications, Part 1

Lecture 2: Creating 2 Separate Applications, Part 2

Lecture 3: Setting Up Module Federation

Lecture 4: Consuming Federated Modules

Lecture 5: Modules Are Loaded At Runtime

Lecture 6: Creating Micro Frontends

Lecture 7: Micro Frontends In Action, Part 1

Lecture 8: Micro Frontends In Action, Part 2

Lecture 9: Navigation Bar Component

Lecture 10: Nested Module Federation. Part 1

Lecture 11: Nested Module Federation. Part 2

Chapter 11: Integration with jQuery

Lecture 1: Getting the Source Code

Lecture 2: Integration with jQuery

Chapter 12: Using ESLint

Lecture 1: Configuring ESLint

Lecture 2: More hints about ESLint

Chapter 13: Summary

Lecture 1: Summary

Lecture 2: Bonus Lecture