Webpack 5 Crash Course | Frontend Development Setup

Рет қаралды 289,901

Күн бұрын

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/webpa...
👇 Website & Courses:
traversymedia.com
💖 Show Support
Patreon: / traversymedia
PayPal: paypal.me/traversymedia
👇 Follow Me On Social Media:
Twitter: / traversymedia
Instagram: / traversymedia
Linkedin: / 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

Пікірлер: 345

@brightsite7561 2 жыл бұрын

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 !

@meJevin 2 жыл бұрын

Senior full stack developer with 3 years of experience sounds hella sketchy 😂😂

@brightsite7561 2 жыл бұрын

Read again. I said on my way of becoming a senior. Meaning now I am mid level and on my way of becoming a senior in a couple of years.

@meJevin 2 жыл бұрын

@@brightsite7561 whoops, my bad!

@brightsite7561 2 жыл бұрын

@@meJevin that’s alright mate

@simajacob7416 2 жыл бұрын

@@meJevin It is not impossible. I have seen ppol with few years of exps and hard working. putting down work that some seniors were unable to do.

@fatehboug1932 2 жыл бұрын

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.

@TraversyMedia 2 жыл бұрын

Thank You 😊

@yt-sh 2 жыл бұрын

@@TraversyMedia Hello Mr Brad, can we get new Electron tutorial with enhanced security etc..

@TraversyMedia 2 жыл бұрын

@@yt-sh That is something I would like to do soon. I need to update my Electron course as well.

@WendimuSitotaw 2 жыл бұрын

Same here … big fan since 2018 and I got into web dev mainly because of @@TraversyMedia

@yt-sh 2 жыл бұрын

@@TraversyMedia yay, thank you for consideration, appreciate it

@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.

@antoniofuller2331 Жыл бұрын

But he seems to be assuming that his audience is gay

@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.

@ReachByteBurst 2 жыл бұрын

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 ❤!

@gamerclips8895 Жыл бұрын

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

@prasadhonrao 10 ай бұрын

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.

@timothyayers8015 Жыл бұрын

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.

@simajacob7416 2 жыл бұрын

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

@rishukumar7586 2 жыл бұрын

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 content.....please keep doing it ..:)

@ekoren6116 2 жыл бұрын

Wanted to let you know, I started my development career from HTML and CSS by watching your tutorials during the first COVID lockdown. Thank you very much for all the content.

@universecode1101 2 жыл бұрын

Nice 😄

@Kuena866 2 жыл бұрын

I started last year in Dec and have learned a lot from Brad....... He is a Champ...... Thanks a lot, Brad for great content

@texz1359 24 күн бұрын

wenpacl.

@katrineren6457 2 жыл бұрын

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!!!

@malkitsingh01 2 жыл бұрын

superb content as always. Many thanks and much love, Brad.

@celionation 2 жыл бұрын

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

@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 2 жыл бұрын

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

@ezeobisochima9944 2 жыл бұрын

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.

@elisabethanggia4502 2 жыл бұрын

Exactly what i need, right now. Thank you.

@dr.margulis7773 2 жыл бұрын

Brad, you the best frontend teacher in the whole damn world! :) :) :)

@adeboyeolushola5684 2 жыл бұрын

Thanks for the support.....you're really changing my life for good Your tutorials and courses are great Keep it up💯

@universecode1101 2 жыл бұрын

Nice 😄

@Thomas_Grusz 8 ай бұрын

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

@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! 😂

@kshayk0 2 жыл бұрын

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!

@Calupp 2 жыл бұрын

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

@morchellemusic2829 2 жыл бұрын

great video, exactly what I needed. Waiting for Snowpack crash course, thanks Brad

@lovrozagar3729 Жыл бұрын

The best webpack tutorial for beginners I could find. Thank you.

@seetlive 2 жыл бұрын

Thank you for this nice Webpack 5 tutorial, short and to the point.

@tips-and-tricks-for-m-files Жыл бұрын

Thank you so much. Finally got webpack 5 to do what I want thanks to your crash course!

@yukii_kamishiro 2 жыл бұрын

Thank you so much Brad, from the bottom of my heart.

@tomaszleszczynski8928 Жыл бұрын

In my opinion, still one of the best Webpack tutorial. Thanks a lot.

@morchedlafferty8614 2 жыл бұрын

I really benefited from this video. Thank you so much for the efforts!

@ahmedabdulrazzaq2015 2 жыл бұрын

I looked at your old webpack vid and said I wish he update it because I need to use for my work and you just posted the new vid 😂😂😂

@philippebaillargeon5204 Жыл бұрын

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

@sojuthomas7727 2 жыл бұрын

Thank you so much for this tutorial, I never heard about sourceMap before, Just implemented it after watching your video.it's so cool.

@gmjitendra 2 жыл бұрын

Excellent, I revisited my basic knowledge on Webpack through this video. Thanks a lot :)

@maximilianominetto524 2 жыл бұрын

Thanks Brad I know it is not easy to stay on youtube and creating new content. You upload interesting videos that they need more support. Thanks and you have a good day

@kurshadqaya1684 2 жыл бұрын

Hello, Brad. You are a legend guy that inspired lots of people to learn programming. I think the same way you can inspire poeple who want to create a new programming channel. I want to start a programming channel, it would be awesome to learn your process in one of your videos from beginning to the end. I mean a video about a course creation. From microphones, to slides, to postprocess of video and so on. Love you!

@universecode1101 2 жыл бұрын

Nice 😄

@mrklenton6897 2 жыл бұрын

Brad! thank your for this Amazing Crash Course. i learning with you and more

@abhijit6772 Ай бұрын

This is the first video I have seen of yours and I understood the setup for webpack 5 completely. Thanks a ton!

@tadakuniyasuda8214 Жыл бұрын

Through struggling, crying, beating myself on the edge of sanity, you share dadjoke humor to show some light of hope, like an angel. Your heart gives us hope. Thank you as always.

@Martinit0 Жыл бұрын

Great course! So helpful. Webpack is a beast not easily tamed.

@collinsk8754 Жыл бұрын

Great tutorial. Simplified webpack concepts very well. Thanks.

@yoDrQ Жыл бұрын

Thank you for a clear and succinct crash course that I can point others to.

@mahmoudalhussain9291 2 жыл бұрын

Yeah the perfect time to learn Webpack 5, Thank you so much Brad u r awesome 👏

@johnadepelumi93 2 жыл бұрын

been working with react and never had to bother about webpack until today. My company is building a project in Vanilla and someway somehow, I have to do some webpack configuration mostly to reduce our build size. This really helped me get started on a good speed.

@georgekrax 2 жыл бұрын

We all needed that video! 💯

@vimux Жыл бұрын

Brad lead me to Javascript full stack development. The moment I finished his MENR stack crash course, back in 2018 or 2017, I fell in love with it and proceeds to dedicate my career into Javascript web development.

@baba_yaga9 Жыл бұрын

The video I've been looking for🙌. Thanks man, you earned a sub today✨

@rorycawley Жыл бұрын

This is excellent, the one to watch for Webpack 5!

@danielwaduka5740 11 ай бұрын

Thanks sir! This has made me pick up the very basics that I needed to know concerning Webpack.

@RJ-mf4bc 2 жыл бұрын

Brad,Your truly best..,Your videos help thousands of developers,Please keep it up❤❤

@emarekica Жыл бұрын

This was fantastic, thank you so much!

@yagzceritoglu1690 2 жыл бұрын

clear and simple explanation about webpack, thank you

@lucas.n Жыл бұрын

boom! top content, right there! who would've believed it is still possible to have good content over youtube in 2020s!? thank you!

@sanashaikh3238 2 жыл бұрын

Thanks brad for this video 😊

@Erik-ss2jp Жыл бұрын

Man, you are awesome. Big thanks!

@parnasmi 2 жыл бұрын

great tutorial on webpack! Thank you very much!

@koushikchatterjee9505 Жыл бұрын

First I press like button and then I started watching your video. Lots of love and respect for you.

@yahyafati 2 жыл бұрын

One of the things that I wanted to learn. Thanks a lot

@XempegeX 5 ай бұрын

Awesome tutorial from start till end! Thanks!

@indroneelray1630 2 жыл бұрын

Thank you Brad, for everything :)

@hachikoi-san3901 Жыл бұрын

I can't believe I have ignored this for so long, it's so cool! can't wait to understand more Vite(veet)!

@lemster909 Жыл бұрын

Awesome! Thank you so much for this content, I learned a lot today.. it's a good start for webpack :)

@Alessandro-nq3tm 2 жыл бұрын

Amazing, as always!

@masaorel6530 Жыл бұрын

Thank you so much for this video, so clear and clean, it helped me understand when i needed in a short time :)

@liammandeville2883 2 жыл бұрын

Great content as usual, I like the new intro too good touch.

@marcosotto8424 Жыл бұрын

Thanks for this video. Incredible. I could learn a lot new stuff with you....

@barryallen2560 2 жыл бұрын

Love the video man

@tsiaowang5820 2 жыл бұрын

Thank you so much, bring me to this whole new world.

@dad_breams 7 ай бұрын

Great vid! thanks Brad

@dryoldcrabman6890 8 ай бұрын

very helpful! Thank you!

@destinlee 2 жыл бұрын

Thanks for the update my man!!

@kchausheva 2 жыл бұрын

Another awesome video from Brad.

@PawanKumarpks 2 жыл бұрын

Brad, thanks you so much,, this tutorial help me to understand webpack very closely.

@sabrefoxx8115 Жыл бұрын

Thank you for this. You're awesome

@one2oblivion Жыл бұрын

thank you just thank you. This was great :)

@eumm11 Жыл бұрын

this was excellent, thank you so much!

@seanbrill4183 5 ай бұрын

Awesome video thanks man!!

@lokeshjain1344 Жыл бұрын

Thank you so much for this course! You are awesome

@abdellahdamri656 2 жыл бұрын

That's was awesome Brad! It was intimidating hearing about these things But you came through THANK YOU !! It would be awesome if you could show use how can we build something like react I am curious how react was built It would be an COOL project. And Again THANK YOU

@danielwoodbridge7244 Жыл бұрын

Awesome, thank you very much

@romankorolov3344 Жыл бұрын

Thank you, useful content!

@someguy1390 2 жыл бұрын

I love webpack, it gives you more control over your environment

@hasnainasif1657 Жыл бұрын

A great introductory video on web pack... Highly recommended...

@tomknud Жыл бұрын

Excellent video, thanks

@user-yg1pm7sv5e Жыл бұрын

Thanks! Great intro tutorial

@anhduy-ii9si Ай бұрын

Great video. Thanks a lot !

@olegmaz3969 2 жыл бұрын

Thanks, amazing course.

@yossefpartouche3983 Жыл бұрын

Excellent ! thank you

@sirajeddinebouasker4267 2 жыл бұрын

Thanks Brad for sharing

@webdevelopmentguide4910 Жыл бұрын

Great video explanation from scratch, Thankyou 😊😊

@nanasarathi Жыл бұрын

Very informative... Thanks for sharing this.

@programwithviggo2197 2 жыл бұрын

I've always wanted to learn about Webpack. I'm glad you made a vidro about it🙏❤️

@Nemcoification 2 жыл бұрын

Right now is a good time, webpack used be quite complex to configure before, but these days it's a lot more manageable.

@UrCloud2 2 жыл бұрын

Thanks brad, I’ve learned webpack while ago and noticed its functionality is very similar to the config file we use in angular. I’ve learned webpack’s functionality in detail at the first time I used it. It’s literally a json array that holds a bunch of statements to function an app. It’s totally understandable by itself if we know how to read code.

@antoniofuller2331 Жыл бұрын

But I can't read

@fatemehqasemkhani3954 11 ай бұрын

As always, you are more than perfect

@brandonstryker8069 Жыл бұрын

Very helpful intro to webpack! thanks :)

@JamesYGGoY 10 ай бұрын

great tutorial, thanks!

@mrjeevy7720 4 ай бұрын

Great vid, thanks!

@ericle1236 2 жыл бұрын

Great video. Thank you sir!

@paschalokafor9043 Жыл бұрын

style-loader injects the styles into the DOM through the style tag css loader converts your css into common js sass-loader converts your sass into css. Take of the order and make sure it is in reverse order.