Traversy Media | Webpack 5 Crash Course | Frontend Development Setup @TraversyMedia | Uploaded March 2022 | Updated October 2024, 2 hours ago.
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:
github.com/bradtraversy/webpack-starter

👇 Website & Courses:
traversymedia.com

💖 Show Support
Patreon: patreon.com/traversymedia
PayPal: paypal.me/traversymedia

👇 Follow Me On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: 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