Learn Webpack - Full Tutorial for Beginners
Vložit
- čas přidán 17. 05. 2024
- Learn Webpack from Colt Steele in this full tutorial course. It begins with a simple question: "What is webpack?" Quickly we move on to installing Webpack, configuring it, and adding loaders for CSS, SASS, HTML, and Files. The course covers cache busting, setting up a dev server, and splitting up your development and production config files. We incorporate multiple Webpack plugins including clean-webpack-plugin, mini-css-extract-plugin, optimize-css-assets-webpack-plugin, terser-webpack-plugin, and html-webpack-plugin. It's a lot of stuff :)
💻 Code and commits: github.com/Colt/webpack-demo-app
🔗 Colt Steele's CZcams channel: / @coltsteelecode
🔗 Colt Steele's Udemy courses: www.udemy.com/user/coltsteele/
⭐️ Course Contents ⭐️
⌨️ (0:00:00) What Even Is Webpack??
⌨️ (0:08:12) Installing and Running Webpack and Webpack-CLI
⌨️ (0:22:18) Imports, Exports, & Webpack Modules
⌨️ (0:29:58) Configuring Webpack
⌨️ (0:38:57) Loaders, CSS, & SASS
⌨️ (0:53:55) Cache Busting and Plugins
⌨️ (1:07:13) Splitting Dev & Production
⌨️ (1:17:13) Html-loader, File-loader, & Clean-webpack
⌨️ (1:28:17) Multiple Entrypoints & Vendor.js
⌨️ (1:34:45) Extract CSS & Minify HTML/CSS/JS
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: www.freecodecamp.org/news
Colt is responsible for me going down this web development rabbit hole. I have not seen daylight in a year.
@@neilt1352 Hahaha
"You can learn this 6 topics and work like frontend developer" - spoke they, haha
@@neilt1352 Hahahaha
no you are responsible for what you have done for yourself. not colt. not anybody else.
Innocent its a joke jeez who hurt you?
It's about 4 years since I'm using webpack but today I've actually learned it!
LOL - you heard that webpack geniuses???
Me too
Me too :)
1:50:19 We've just scratched the surface 😅
you are not alone :D :D
The best video on webpack I have seen so far.
When following this video (in 2023), at the point where we use file-loader, you might experience a bug that causes your webpack to build two asset files and then link to the wrong one.
This is due to webpack 5 adding functionality to load assets by default.
To resolve that error, add this to the rules array,
{
test: /\.(svg|png|jpe?g|gif)$/i,
type: "asset/resource",
},
and remove the file-loader config completely.
Colt is the reason why I was able to get back into Coding. Thanks for being an awesome instructor in Udemy and everywhere.
Just halfway through the video and I've already understood more than what I got from a paid Udemy course. Though this video is 2 years old, its a fantastic starting point for anyone willing to learn Webpack!
Colt, you're an absolute legend. Thanks!
Spent the whole day searching for a tutorial this good. Thank you.
This is one of those amazing tutorials I have watched so far in my entire career. Thank you so much for this detailed explanation. you are awesome...!!
Best 2 hours spent on a video tutorial in months! Loved it. Thanks Colt!
Handy down one of the best tutorials I've seen on web technologies. Thanks for making me able to set up a webpack project in a glimpse
One of the best tutorials I've ever watched. And I've watched 15 years worth of tutorials. Thank you so much, subscribing.
this is such an excellent introduction to the basics and theory of webpack, enough to get a person up and running with their own project or able to competently interact with a current webpack configuration. It's just under 2 hours of video time, however I spent probably a told of 5 hours setting things ups, coding along, etc. Very well worth it
Thanks, thanks and thanks! Literally 2 weeks trying to learn Webpack and just with this course in one day i feel pretty confident to start my own projects and sticking with the docs to do awesome things with module bundling. As always Colt never fails :D
Always on point, Colt!
In my opinion, this is the only tutorial one would need to understand how webpack works.
Thank you for such a great tutorial.
Struggling to grasp the basic concepts of Webpack, I found this video! Best of the best step-by-step explanation. Thank you!
Best Webpack tutorial online. Right order of features and the right pace. Kudos!
This guy is amazing! Thoroughly enjoyed the mini-course. I must confess I was always a bit intimidated by Webpack but this guy has taken away my mental demons. The content and structure of this course is amazing! Loved it! Thanks, Colt, you are amazing !!!
Colt is one of the best tutor out there. I love his courses.
Love this man. Introduced me to this industry. Appreciate it, Colt.
Wow, this 2 hr video took me 5 days to get through, but I enjoyed every second of it and this helped me soooooo much.
So far this is one of the best and most comprehensive tutorial and explanation of Webpack. I learned so much here.
Glad I found this course by colt Steele. Couple of years back I went through his js algorithms and data structures course and it was so clear and fun to learn
Love u colt Steele..Ur web developer bootcamp in udemy is awesome. love from Nepal
I'm a webpack newbie and this video was a HUGE help! I can't thank you enough!
Once again, just finished the course in the "coding along" mode. The fantastic course! Recommended.
This tutorial helped me more than you can imagine. Thank you very much sir!
This is perhaps the best webpack tutorial i have watched. Thank you Colt
Thank you for taking such an intimidating concept and breaking it down step by step in an easy to digest and follow along away. And thank you even more for then providing that content for free.
This is the best webpack tut I have seem so far. I hardly find a article/video with the proper project source and commits. Hope to see more stuff like this with babel for example.
You are really a good teacher...This is one of the best tutorials out there in general...Keep up the good work brother!
This is the most comprehensive and helpful webpack turorial on youtube !
Very well explained Colt. Thank you for this tutorial. I highly recommend anyone who wants to learn a webpack, or start understanding it.
Great course, and like many people have commented, you have really helped to demystify the webpack setup in such a simple way and also show us useful things we can do with it - top guy!
The content and the structure of this course is Amazing!
Thank you Colt :)
the best webpack for me! I watched around 10 other tutorials and this one is the best.
Really nice!! He explains how everything works instead of just do the things, it give us a better understanding.... tks a lot!!!
Love this tutorial. Demystified a lot about Webpack. Thank you Colt Steele.
Thank you for such a clear explanation. I learned a lot of stuff about webpack. I had to actually set up a new app with custom configurations. It was very daunting and intimidating. Then I found this video. This helped a lot in setting things up.
Webpack always intimidates me, but now i am like "I know Kung-Fu". thank you so much.
IKR DAMN😂
too bad u only scratched the surface
@@lycan2494 what do you mean *trembles*
@@lubomirpacheliev363 u should be frightened!
This helped me so much while I was having trouble making sense of the webpack official documentation and couldn't figure out where to start. Thanks so much!
What a fantastic tutorial and an amazing tutor. This is great quality tutorial, thank you!
actually one of the best webpack tutorial , i appreciate it
Great tutorial! Thank you so much!
Needed to use
const {merge} = require("webpack-merge");
instead of
const merge = require("webpack-merge");
Just a heads up in case you get any errors.
Webpack now minifies your production code by default. I still watched until the end of the tutorial to learn more.
Thanks that fixed my issue, where did you get that info? I'm interested in finding out exactly why this change occurred.
@@jordanski5421 check the official docs
Thanks. I was stuck for a while and couldn't figure out how to move forward.
Man your content is amazing, you are a spetacular teacher, this subject seems like japanese to me and now it is so mutch simpler to understanding it. Thank you!
Great video for mid-software dev who has to start using webpack. Subscribed and will watch any other full/crash courses you publish.
Not only I learned a lot, really a lot with this tutorial, but also I laughed a lot too, man, you're amazing and you gain a new follower
Amazing course! It was great like the previous tutorials. Thank you colt. You are the best
Amazing tutorial! Webpack was a kind of abstract tool for me, because I usually use CLI's. But not anymore, because I've seen here Webpack so easy to code. Thanks, man. Well done! :)
Best tutorial I've encountered on this subject. Been following along while building an AngularJS app and it's been perfectly clear. Thank you!
This is still relevant in 2021. Thank you Colt!!!
For people watching this, there are few things you might want to know:
- with webpack 5, you can use asset modules instead of file-loader
- use output.clean instead of clean-webpack-plugin
thanks I was looking for this comment :D
For me, this has been a great introduction tutorial. Thanks for your time and effort.
wow what a instructor .define every thing in depth details
Just what I needed. Awesome introduction to Webpack!
0:36:10 had to use "devtool": false, instead of none due to a breaking change in the latest webpack.
1:15:04 latest webpack 5 package.json script: "start": "webpack serve --config webpack.dev.js --open",
1:24:30 file-loader not needed in webpack 5: Add the following to your webpack.prod.js file
module.exports = merge(common, {
mode: "production",
output: {
filename: "main.[hash].js",
path: path.resolve(__dirname, "dist"),
assetModuleFilename: "./imgs/[name].[hash].[ext]",
},
});
1:42:05 optimize-css-assets-webpack-plugin not supporting webpack5, use css-minimizer-webpack-plugin instead per maintainers.
thanks buddy
thanks a lot man, I didn't understand why my images weren't loaded ahaha
I've just fixed devtool, and was curious if anyone had same issue, then I've ssen this. You Rock!
I will use devtool: 'inline-source-map' to make it look similar in webpack 5 (yes I know your tutorial at the time is at webpack 3)
1:11:53 merge is being imported as a named function {merge} now instead of default const merge = ...
Excellent video! thanks for taking the time to explain things clearly with great examples!
This guy is one of the best tutors out there.
Very good tutorial and it covered a LOT but it was easy to ingest at the pace you took. I have already shared it with a few people who may benefit from this.
This video is a very good starter for every aspiring web developer. Extremely helpful for me personally. It's a one pill solution to learn Webpack in 2 hours. Great work Colt!!
Sorry to bother you, but if this is a good starter point what would be the next step for learning it moe deeply? please, its so dificult to find something more advance!!
Very satisfying and informative! This is all what I wanna know. Thanks Colt!🙌🏼
Great introduction. I learned a lot and believe I have a foot hold into getting a start with Webpack. Your cat is awesome!
What a tutorial!!! Simply awesome👏✊👍 one of the best i ve ever encountered. please do more
The video description should actually say "Explaining the Abstract framework Webpack"
Seriously this is one of the best tutorials on Webpack I've come across that explain the concepts and architecture! Thank you!
Great tutorial. he has explained everything properly where everyone can understand.
One of the better introduction to webpack. Suddenly the webpack blackbox is more clear.
Great piece of knowledge. Just starting my webpack journey and it clears a lot to me. Many thanks :)
Excellent tutorial! Finally, I have the idea about Webpack now, I'm starting understand all the copy-paste black magic I've bee doing for years. Thank you!
I really appreciate all the videos you guys upload
I'm new to web dev and i like what webpack can do, the tricky part is configuring it,
but i like it so this is gonna be my workflow now, i might add some templating engine like handle bars too, currently I'm taking your algo data structures master class,
tnx Colt!
Easily the best webpack introduction I've seen, hands down.
easily the best webpack course on the web. thank you.
Great overview! Really helped me wrap my head around everything. Thank you!
Hey Colt, thanks for the tutorial. Really great and super useful.
One bit of feedback: right at the end when you are minifying the HTML. You move "new HtmlWebpackPlugin()" from "plugins" in the common webpack config, and add it to "plugins" in the dev config - but in production you add it to "optimization.minimizer" instead of "plugins" which I found strange. It all seems to work great but an explanation why in production it is located in a different location would be really useful.
Cheers, Matt.
This really helped me! Thanks for taking the time to do this video tutorial!
On thing I would have loved to have seen is using multiple loaders for the same file type, however I am guessing you just have to tweak your regular expression.
Scary topic explained in a very simply and calmly. Love the tone of your voice @ColtSteele
Thanks Colt Steele, You just cleared a black blur in my career, thanks a lot this is of great help!
I decided to switch my career over and my first task on my new role was to upgrade Webpack! I looked at the docs for 2 days, read the existing codebase for a few more days and ended up with nothing. Saw this video and literally everything that I read over the last few days makes sense!
This is such a useful video. Detailed explanations of what does what and why.
Awesome tutorial. Extremely well explained. Thank you very much.
This is the best thing I cam across as a new developer. Webpack is indeed intimidating for the newbies, but I think I am pro at it after this video (not really, but we are definitely getting there!) ;)
Thank you so much!
It helped me a lot. I was looking for this video. Good job dude.
Great tutorial. Webpack is one of those development tools that becomes a development project on its own.
Thanks dude, that's helpful.
Minor suggestion: i know you like windows as background, but the bright light is... bright? :)
Question: say i bloat my project with tons of files. Is there a way to graph dependencies? Maybe a gui?
Question: does anybody know how /bin/ in some of npm modules come to be? Are they created on npm install? Or at a later date? Are the contents used for the module itself or does your app uses them? Do i need to clear them out if i want to do a clean build (assuming i used "npm update" beforehand).
PS: Rusty is now a cat?
I've been using webpack for a couple of days without actually knowing what was going on until I found your tutorial. Thank you good sir!
As a side note a couple of things do not work with latest version of webpack but just google the problem and fix it.
Best Webpack tutorial I have viewed
I'm in all of your Udemy courses. Thank you.
Awesome! Best webpack video I've seen so far!
Highly recommend this video to get started with webpack.
Amazing course. Will you be doing an advanced course as well? thank you so much for doing this.
Great stuff!! That was really helpful. Thumbs up for Colt Steele.
Wow I took 4 days to go through this tutorial and at first I tried to solve the things by myself and then I watched How He did it and at the end of the course I felt like I learnt something really powerfull and uselul , so I just want to say Thank You, by far the best explanation I have ever seen on webpack.
The best webpack course I have ever seen
Prime content!!! Great explanations, and proper examples. 5 Stars
I am in the last year of my school to be an electronic engineer while studying web development on my own. I've always had trouble with bad teachers and administrative management because usually, I feel I'm losing time and that the people that suppose to be our mentors don't care about us.
Around minute 40:00 I genuinely started crying, I couldn't stop it, thinking why I don't have such an amazing teacher at school.
I'm still crying, so I only can say THANK YOU!!!
Thanks for the tutorial. All important and basics are well covered.
Wow...!!! Very well explained tutorial. Learned a lot and enjoyed every bit of it. Thank you very much.
Awesome course. I might have to review it, but I can see why ppl like Colt Steele.
You are so knowledgeable on this subject. Thank you very much.
Amazing clear tutorial! thank you very much!
damn
this is awesome.
hopefully, I will break down my interview at facebook , uber and capital one
thanks colt.
I read the doc and I thought I knew everthing but the way that you have explained it make me think that there are people really talent out there and I should follow them.
this is the first course I took to you because I always think I am smart enough to figure everything out on my own.
I really appreciate your efforts.
Where do you apply for these interviews ? Help out a bro from the 3rd world 😬
This was incredibly helpful, thank you very very much!!
Wow! Thank you so much for this tutorial! By far the best explanation out there! Any tips for how to add babel and typescript?