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 !
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.
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.
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.
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.
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 ❤!
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!
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.
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.
You rescued me from Parcel hell ! It was working all fine with a practice project but suddenly it stopped HMR, and I researched and tested my a** off ultimately resulted in anything. So I dared myself to try webpack which was on my roadmap to learn but not now, .then( ! ) Where to learn installing and configuring webpack other than bruda Brad ! THANK you man, your teaching and demonstration is clean, soooooooo straight forward, THANKS A LOT
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!
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! 😂
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 ..:)
Thank you for this amazing tutorial! You've covered the most important things that establish a solid foundation for understanding Webpack. Anything more complex or advanced can be easily applied from the documentation.
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
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.
This is such an awesome tutorial. I knew about webpack and how to use it. However, sarted it to check if I can get more insights on the same. Details about the video and the tutorial. { rating: { flowOfVideo: 5, teachingSkills: 5, clarityInExplanation: 5, informationGained: 5, knowledgeBoost: 5, maxAllowedRating: 5 }, experience: { elightened: true, enjoyed: true, recommendThisVideo: true, likedVideo: true, bored: false, complainsAndSuggestions: null } }
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.
Perfect, exactly what I was looking for. A concise summary of common config options for webpack. Wish I could give it 10 thumbs up. Thanks Brad! BTW, the official webpack documentation is terrible. Full of bugs, errors, rambling, and bad writing. This video is crystal clear and to the point.
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.
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.
I felt really intimidated by all those properties that webpack config has, so I've been putting it off (the learning, that is) for many months. This crash course is golden, I now feel confident I will know my way around the config file if I needed to make adjustment in my projects. Thanks a lot, Brad!
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!
This is frustrating. Why when we listen to your voice tone, everything seems to be a walk in the park 😁🤣 Your the best teacher on TH-cam man. Keep doing it, it is a rare skill.
Woooow this video was help myself to do my first project using webpack. Unfortunnely, I was doing a bunch of projects without take care of a properly planning and using a lot of old tecnologies and bad practices, and now, is the moment for learning about the Front-End best tools for this times. I was reading and learning about webpack from the official documentation, but, despite the info is very interesting about the potential of this dev enviroment, for moments is pretty confuse to me and a lot of theory to learn, is for that the reason I was looking a practical introduction with a little sample project to learn a bit of the bases, and this video was the one I'm looking for. In addition, congrats for the voice, I'm not a native English speaker, and I can say the voice is clearly well. Thanks a lot, this video have my like and I'm a new suscriptor for your channel, I hope to find content like that in the future, good evening for you.
For whatever reason npm run dev did not work 23:00 for me (a lot of error messages "options should NOT have additional properties), but I was able to finish everything and it turned out fine. Thanks for the video!
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.
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.
Just as I needed to learn more about webpack, you release this video! Good stuff Brad. Just wondering, could you upload a video about converting a React app into a micro front end app? Using tools like single spa...
What's a micro front end app? The way we've been building "micro-fe"-s is that we have somekind of nginx loadbalancher that routes to certain react apps by definining simple if statements if path = xx > then go to app1 otherwise app2 etc... What's that you're trying to achieve?
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
This was really a great overview to Webpack. I followed the steps in the video and everything works alright except that when I make changes to the template.html file, it doesn't reflect live on the webpage except if I manually reload the page but when I make changes to the SCSS or JS files it's changes reflect live.
when transpiling code babel wraps it an arrow function, which is not ES5 feature, to fix this you can add to output: environment: { arrowFunction: false, } also asset/resource works good with background images, but doesn't affect img tag, if you want to use img tag inside html you should add html-loader
if you make your tutorial videos 30 or 40 mins but make them in several parts is very helpful for me and other people, because right now I don't have a lot of time to watch a 1 or 2 hour video, but if that video split into 40 mins parts it is easier to follow along. Thanks and keep on the good work ♥️👏🏻
Hallo guys, I have question, why in 19:18 it is write with lowerCase the Capical the htmlWebpackPlugin.option.title, where in out webpack.config,js we ahve that with UpperCase the capical HtmlWebpackPlugin in out const. how it work that if I get it in my template .html in my title with UpperCase it not work and if I get it with lowerCase it work? Why? Know someone reason? Please, thanks for answer.
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 !
Senior full stack developer with 3 years of experience sounds hella sketchy 😂😂
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.
@@brightsite7561 whoops, my bad!
@@meJevin that’s alright mate
@@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.
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.
Thank You 😊
@@TraversyMedia Hello Mr Brad, can we get new Electron tutorial with enhanced security etc..
@@yt-sh That is something I would like to do soon. I need to update my Electron course as well.
Same here … big fan since 2018 and I got into web dev mainly because of @@TraversyMedia
@@TraversyMedia yay, thank you for consideration, appreciate it
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.
But he seems to be assuming that his audience is gay
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.
Nice 😄
I started last year in Dec and have learned a lot from Brad....... He is a Champ...... Thanks a lot, Brad for great content
wenpacl.
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.
I love how Brad teaches he always go directly to the point with a lot of hands on examples
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 ❤!
2 minutes in I just realized how recently this was uploaded. you are an absolute godsend
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!
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.
Brad, you the best frontend teacher in the whole damn world! :) :) :)
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.
You rescued me from Parcel hell ! It was working all fine with a practice project but suddenly it stopped HMR, and I researched and tested my a** off ultimately resulted in anything.
So I dared myself to try webpack which was on my roadmap to learn but not now, .then( ! ) Where to learn installing and configuring webpack other than bruda Brad ! THANK you man, your teaching and demonstration is clean, soooooooo straight forward, THANKS A LOT
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!
Nice 😄
This video is like 10000x better than any get started blog I read about webpack. Good job
It definitely was a crash course but it got the job done, everything worked without a hitch. Thanks Brad
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! 😂
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 ..:)
Thank you for this amazing tutorial! You've covered the most important things that establish a solid foundation for understanding Webpack. Anything more complex or advanced can be easily applied from the documentation.
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
This is the first video I have seen of yours and I understood the setup for webpack 5 completely. Thanks a ton!
Great video, Brad! You are one of favorite content creators for online web dev education.
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.
First I press like button and then I started watching your video. Lots of love and respect for you.
This is such an awesome tutorial. I knew about webpack and how to use it. However, sarted it to check if I can get more insights on the same.
Details about the video and the tutorial.
{
rating: {
flowOfVideo: 5,
teachingSkills: 5,
clarityInExplanation: 5,
informationGained: 5,
knowledgeBoost: 5,
maxAllowedRating: 5
},
experience: {
elightened: true,
enjoyed: true,
recommendThisVideo: true,
likedVideo: true,
bored: false,
complainsAndSuggestions: null
}
}
In my opinion, still one of the best Webpack tutorial. Thanks a lot.
We all needed that video! 💯
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 😂😂😂
I can't believe I have ignored this for so long, it's so cool!
can't wait to understand more Vite(veet)!
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.
Thanks, Brad.
I was just searching for a good and latest webpack tutorial 2 hours before your release. Thanks Again.
Thanks for the support.....you're really changing my life for good
Your tutorials and courses are great
Keep it up💯
Nice 😄
boom! top content, right there! who would've believed it is still possible to have good content over youtube in 2020s!? thank you!
Perfect, exactly what I was looking for. A concise summary of common config options for webpack. Wish I could give it 10 thumbs up. Thanks Brad! BTW, the official webpack documentation is terrible. Full of bugs, errors, rambling, and bad writing. This video is crystal clear and to the point.
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.
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.
I felt really intimidated by all those properties that webpack config has, so I've been putting it off (the learning, that is) for many months. This crash course is golden, I now feel confident I will know my way around the config file if I needed to make adjustment in my projects. Thanks a lot, Brad!
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!
This is frustrating. Why when we listen to your voice tone, everything seems to be a walk in the park 😁🤣
Your the best teacher on TH-cam man. Keep doing it, it is a rare skill.
Woooow this video was help myself to do my first project using webpack. Unfortunnely, I was doing a bunch of projects without take care of a properly planning and using a lot of old tecnologies and bad practices, and now, is the moment for learning about the Front-End best tools for this times.
I was reading and learning about webpack from the official documentation, but, despite the info is very interesting about the potential of this dev enviroment, for moments is pretty confuse to me and a lot of theory to learn, is for that the reason I was looking a practical introduction with a little sample project to learn a bit of the bases, and this video was the one I'm looking for.
In addition, congrats for the voice, I'm not a native English speaker, and I can say the voice is clearly well.
Thanks a lot, this video have my like and I'm a new suscriptor for your channel, I hope to find content like that in the future, good evening for you.
The best webpack tutorial for beginners I could find. Thank you.
Brad you are an absolute legend. Thank you so much for this!
Exactly what i need, right now. Thank you.
Thanks sir! This has made me pick up the very basics that I needed to know concerning Webpack.
superb content as always. Many thanks and much love, Brad.
Thank you so much. Finally got webpack 5 to do what I want thanks to your crash course!
For whatever reason npm run dev did not work 23:00 for me (a lot of error messages "options should NOT have additional properties), but I was able to finish everything and it turned out fine. Thanks for the video!
A great introductory video on web pack...
Highly recommended...
Brad,Your truly best..,Your videos help thousands of developers,Please keep it up❤❤
Thank you very much, Sir, finally I understand how does Webpack work! Cheers!
Thank you, Brad, just what I was looking for. You drop this just at the right time. 💯❤
Thank you so much for this tutorial, I never heard about sourceMap before, Just implemented it after watching your video.it's so cool.
I love webpack, it gives you more control over your environment
Such a great course. Thanks for putting it together I learned a lot.
Cheers!
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.
But I can't read
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.
Excellent, I revisited my basic knowledge on Webpack through this video. Thanks a lot :)
great video, exactly what I needed. Waiting for Snowpack crash course, thanks Brad
Just as I needed to learn more about webpack, you release this video! Good stuff Brad.
Just wondering, could you upload a video about converting a React app into a micro front end app? Using tools like single spa...
Use vite instead
What's a micro front end app? The way we've been building "micro-fe"-s is that we have somekind of nginx loadbalancher that routes to certain react apps by definining simple if statements if path = xx > then go to app1 otherwise app2 etc... What's that you're trying to achieve?
The video I've been looking for🙌. Thanks man, you earned a sub today✨
Thanks from India!
Are you still learning web development?
Great content as usual, I like the new intro too good touch.
Great course! So helpful. Webpack is a beast not easily tamed.
Thank you for a clear and succinct crash course that I can point others to.
Thank you so much Brad, from the bottom of my heart.
This is excellent, the one to watch for Webpack 5!
Another awesome video from Brad.
Thank you for this nice Webpack 5 tutorial, short and to the point.
Here is the corny part..I told someone that exact same joke the other day an they had the nerve to laugh..Thanks for sharing big guy 🤟🏽
Awesome tutorial from start till end! Thanks!
Thank you so much for this video, so clear and clean, it helped me understand when i needed in a short time :)
Love the video man
I love this channel content ❤️ but the only thing missing is captions because my friend's English listening skill is not that good but he can read it.
Great tutorial. Simplified webpack concepts very well. Thanks.
I really benefited from this video. Thank you so much for the efforts!
Now webpack also become zero configuration like parcel. Earlier versions, we need to add webpack.config.js to compile and create dist folder.
which version? I just made a bundler with 5.71, still needed webpack.config
Amazing, as always!
Yeah the perfect time to learn Webpack 5, Thank you so much Brad u r awesome 👏
Very informative and good explained video. Thank you for sharing!
Thank you so much, bring me to this whole new world.
Thanks brad for this video 😊
Brad! thank your for this Amazing Crash Course.
i learning with you and more
As always, you are more than perfect
Thanks for this video. Incredible. I could learn a lot new stuff with you....
love the new intro !!
Brad, thanks you so much,, this tutorial help me to understand webpack very closely.
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
This was really a great overview to Webpack. I followed the steps in the video and everything works alright except that when I make changes to the template.html file, it doesn't reflect live on the webpage except if I manually reload the page but when I make changes to the SCSS or JS files it's changes reflect live.
Same problem man ;/ Did you found solution for this ?
@@sati2953 In your Webpack.config.js file change the dirname of the output path to SRC. After development change it back to dist.
@@taofeeqomotolani2311 What is the rationale behind this?
Amazing Content Man! Keep it up
when transpiling code babel wraps it an arrow function, which is not ES5 feature, to fix this you can add to output:
environment: {
arrowFunction: false,
}
also asset/resource works good with background images, but doesn't affect img tag, if you want to use img tag inside html you should add html-loader
And then file-loader as well
@@akshay__sood you don't need fileloader, you can use generator option to generate output path and output file name if needed
@@aleksandr2245 ok thanks! But file-loader does the work too.
This is perfect, just what i need. Thanks. Wating The SnowPack versión.
if you make your tutorial videos 30 or 40 mins but make them in several parts is very helpful for me and other people, because right now I don't have a lot of time to watch a 1 or 2 hour video, but if that video split into 40 mins parts it is easier to follow along. Thanks and keep on the good work ♥️👏🏻
Bro just pause the video when you need to stop and write down where you're at. There's increments in the video bar for the sections too.
@@braumski2 thanks, I will do that if I don't fall asleep during watching 😁
New introduction 😀
Thank for your tutorial and I love it so much. Please continue to extend it with React
also it would be nice if we get to learn how to use it with module federation for implementing Micro Frontends
One of the things that I wanted to learn. Thanks a lot
Thank you Brad, for everything :)
very helpful! Thank you!
Man, you are awesome. Big thanks!
clear and simple explanation about webpack, thank you
Hallo guys, I have question, why in 19:18 it is write with lowerCase the Capical the htmlWebpackPlugin.option.title, where in out webpack.config,js we ahve that with UpperCase the capical
HtmlWebpackPlugin in out const.
how it work that if I get it in my template .html in my title with UpperCase it not work and if I get it with lowerCase it work? Why?
Know someone reason?
Please, thanks for answer.