Webpack 5 Crash Course | Frontend Development Setup

In this video, we will create a Webpack dev environment from scratch including...

Webpack setup

Webpack Dev Server

HTML Webpack Plugin

Sass Compiling

Babel Transpiling

Asset Resource Loaders

Analyzer Plugin

Source Maps

💻 Webpack Starter Repo:

https://github.com/bradtraversy/webpack-starter

👇 Website & Courses:

https://traversymedia.com

💖 Show Support

Patreon: https://www.patreon.com/traversymedia

PayPal: https://paypal.me/traversymedia

👇 Follow Me On Social Media:

Twitter: https://twitter.com/traversymedia

Instagram: https://www.instagram.com/traversymedia

Linkedin: https://www.linkedin.com/in/bradtraversy

Timestamps:

0:00 - Intro

2:29 - Initial Files (src/dist)

4:24 - Creating Modules

6:10 - Webpack Install & Building

8:20 - Using NPM Modules

9:27 - Webpack Config File

12:42 - Loaders & Sass Compiling

16:11 - HTML Webpack Plugin

18:30 - HTML Template

20:35 - Caching & Hash Setup

22:10 - Webpack Dev Server

25:22 - Cleaning Up Hash Files

26:50 - Source Maps

27:52 - Babel Loader

30:32 - Asset Resource Loader

34:18 - Finish The Joke App

38:26 - Webpack Bundle Analyzer