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:

👇 Website & Courses:

💖 Show Support

👇 Follow Me On Social Media:

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

[brightsite]

Brad, 3 years ago my journey started with you. On my way of becoming a senior full stack developer at an awesome company. You are changing lives brother !

[fatehboug]

This Guy made me fall in love with programing I started following this channel since 2018 and now I'm working as full stack JavaScript developer thanks to God and thank you very much for making such awesome content.

[rayromanov]

This was a very useful and easy to follow introduction to something I've been holding off for months simply because it looked so complicated. Turns out it's not! Thank you so much, Brad.

[gamerclips]

I love how Brad teaches he always go directly to the point with a lot of hands on examples

[ReachByteBurst]

Straight to the point and recent, loved it.

Saved my day, I was struggling with implementing sass the entire time because all the tutorials use node-sass which is (as you lined out) deprecated, but then I went to the sass chapter on this video and it worked!


So thanks ❤!

[prasadhonrao]

This is the best Webpack tutorial and nothing less was expected from Brad. I am just buying another course from his website as a token of appreciation. Thanks Brad.

[timothyayers]

Dude. You are so awesome. All I needed was this video instead of watching bits and pieces from other videos. Thanks for access to the sample. Nice to have after you did a great job at taking us through each step to build it. Would have been hard to just look at everything and know how each part gets used. Now, I understand why a tool such as webpack is something I need to use.

[rishukumar]

Brad ..i just want to say thank you for your efforts ..it really means a lot for all of us who learn from your videos. You have spent your valuable time on creating such quality keep doing it ..:)

[simajacob]

Thanks, Brad.
I was just searching for a good and latest webpack tutorial 2 hours before your release. Thanks Again.

[katrineren]

Brad, I wonder why you always know what I am planning to learn and make a course at the exactly right time….Thank you so much for this great tutorial!!!

[manwithllama]

I'm learning Webpack for the first time, and your video is the best one I've found. 

- Your pacing is perfect. Not too fast, not too slow.
- You don't focus on the app being built—you focus on webpack (another 2hr+ long video tries to demonstrate webpack with an overly complex example app. It was mind numbing.)
- You start/code "from scratch". That's so important in learning. There are no existing files. I watch you code and absorb every step (again, because of your calm pacing).

In other words, (21 minutes in at least) you don't seem to assume anything of the viewer besides basic html/css/js skills. 

Thank you so much for putting this together. I'm learning lots, and will come back to it again when I start implementing it. Thanks Brad! Instant subscribe.

[kshayk]

I was always afraid of webpack and how complicated it seems to be, but you managed to break it into a very understandable segments and it made it seem far less intimidating now. Thank you very much!

[daydreamical]

Just wanted to thank you for making and sharing this video, it cleared up so many questions I had for me and I definitely learned a LOT from it. Thank you so much!

[ZenTechnologist]

It definitely was a crash course but it got the job done, everything worked without a hitch. Thanks Brad

[ezeobisochima]

Even though I am here yet I still value this like any other video. To me all Brad's video is a must watch 😁.

Keep up the good work in making more great leaders Brad, indeed it actually making you a better leader. Loads of love from here.

[celionation]

Thank you, Brad, just what I was looking for. You drop this just at the right time. 💯❤

[philippebaillargeon]

This video is like 10000x better than any get started blog I read about webpack. Good job

[Calupp]

2 minutes in I just realized how recently this was uploaded. you are an absolute godsend

[EricMalek]

I can't believe I found this by total accident! Helped me in about 30 minutes with what I couldn't figure out in 3 days. Seriously, thank you for this.
Btw, I almost spit my coffee out at “I can has”! That’s some old school right there! 😂

[Thomas_Grusz]

Great video, Brad! You are one of favorite content creators for online web dev education.