Learn Webpack - Full Tutorial for Beginners 

Colt is responsible for me going down this web development rabbit hole. I have not seen daylight in a year.

It's about 4 years since I'm using webpack but today I've actually learned it!

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.

Colt is the reason why I was able to get back into Coding. Thanks for being an awesome instructor in Udemy and everywhere.

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.

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

Spent the whole day searching for a tutorial this good. Thank you.

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

Love u colt Steele..Ur web developer bootcamp in udemy is awesome. love from Nepal

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

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

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.

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!

Struggling to grasp the basic concepts of Webpack, I found this video! Best of the best step-by-step explanation. Thank you!

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

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.

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

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

Best 2 hours spent on a video tutorial in months! Loved it. Thanks Colt!

Love this man. Introduced me to this industry. Appreciate it, Colt.

Colt is one of the best tutor out there. I love his courses.

This tutorial helped me more than you can imagine. Thank you very much sir!

One of the best tutorials I've ever watched. And I've watched 15 years worth of tutorials. Thank you so much, subscribing.

Once again, just finished the course in the "coding along" mode. The fantastic course! Recommended.

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.

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!

Very well explained Colt. Thank you for this tutorial. I highly recommend anyone who wants to learn a webpack, or start understanding it.

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

I'm a webpack newbie and this video was a HUGE help! I can't thank you enough!

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.

Best Webpack tutorial online. Right order of features and the right pace. Kudos!

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

So far this is one of the best and most comprehensive tutorial and explanation of Webpack. I learned so much here.

Webpack always intimidates me, but now i am like "I know Kung-Fu". thank you so much.

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 :)

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.

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.

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

This is the most comprehensive and helpful webpack turorial on youtube !

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!

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!

Best tutorial I've encountered on this subject. Been following along while building an AngularJS app and it's been perfectly clear. Thank you!

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!

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

Easily the best webpack introduction I've seen, hands down.

This is perhaps the best webpack tutorial i have watched. Thank you Colt

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.

What a fantastic tutorial and an amazing tutor. This is great quality tutorial, thank you!

Really nice!! He explains how everything works instead of just do the things, it give us a better understanding.... tks a lot!!!

Just what I needed. Awesome introduction to Webpack!

For me, this has been a great introduction tutorial. Thanks for your time and effort.

Amazing course! It was great like the previous tutorials. Thank you colt. You are the best

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!

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!

I fully agree this amazing video brings a big deal to deeply understand what to do with WebPack for a highly tuned bundle. Now when I bootstrap a new project for example with Vue CLI, it gives a profound understanding of how this all is scaffolded. However for those who now consider themselves as kind of Webpack ninjas (as seen in the comments), I would say, speaking about me first, we are still miles away to understand how plugins, loaders, etc work and articulate themselves. Another big step required to master this as well. Another step would also be to understand the why and how of source maps. Some comments: 1/ I noticed css-loader is not strictly necessary for me, before style-loader which injects into the DOM (on a project using no sass but post-css to have modern CSS compatible with IE). However, strangely, MiniCssExtractPlugin.loader requires it. 2/ Speaking about vendor.js, I was surprised we need to explicitly install dependencies (such as jquery and popper) to make bootstrap work. It looks it kind of defeats dependency management which primary purpose is to handle this. My hope is this need is limited to first tear of dependencies not the whole tree when many dependencies are involved. 3/ In the production configuration, HtmlWebpackPlugin was inserted in the optimization section. It works. However seems more logical for me to place it in the plugins section. It works too. Finally, thank you for this fantastic video. It has it all. Highly recommended.

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?

Love this tutorial. Demystified a lot about Webpack. Thank you Colt Steele.

Great piece of knowledge. Just starting my webpack journey and it clears a lot to me. Many thanks :)

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.

actually one of the best webpack tutorial , i appreciate it

Excellent video! thanks for taking the time to explain things clearly with great examples!

Great video for mid-software dev who has to start using webpack. Subscribed and will watch any other full/crash courses you publish.

If anyone is having problems with "merge-webpack".. On Webpack +5 you must destructure the merge function and CleanWebpackPlugin from the package import: const { merge } = require('webpack-merge') const { CleanWebpackPlugin } = require("clean-webpack-plugin"); Also, you may have problems with "webpack-dev-server". Instead, you can use "webpack-serve" (without the final 'r')

the best webpack for me! I watched around 10 other tutorials and this one is the best.

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.

I just finished watching this tut (October.2022). its the best webpack tutorial I have ever seen ! I just want to point at some things: * for merge, I had to import it this way: const { merge } = require('webpack-merge'); or it game me an error. * I had to use css-minimizer-webpack-plugin rather than optimize-css-assets-webpack-plugin, you might need this if you are using a new version of webpack.

One of the better introduction to webpack. Suddenly the webpack blackbox is more clear.

I'm in all of your Udemy courses. Thank you.

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.

What a tutorial!!! Simply awesome👏✊👍 one of the best i ve ever encountered. please do more

Thanks Colt Steele, You just cleared a black blur in my career, thanks a lot this is of great help!

I really appreciate all the videos you guys upload

thank you for this tutorial. Just your intro alone is worth a thumbs up. I'm learning how to build my own app using create_react_app

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!

This guy is one of the best tutors out there.

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

Just amazing! Thanks a lot for your tutorial, it's awesome!

Highly recommend this video to get started with webpack.

Awesome tutorial. Extremely well explained. Thank you very much.

Great introduction. I learned a lot and believe I have a foot hold into getting a start with Webpack. Your cat is awesome!

Great tutorial. Webpack is one of those development tools that becomes a development project on its own.

Amazing course. Will you be doing an advanced course as well? thank you so much for doing this.

Love you so much dear Colt ❤️

if you're using webpack-cli 4 or webpack 5, change webpack-dev-server to webpack serve. Example: "serve": "webpack serve --config webpack.dev.js --open"

Amazing clear tutorial! thank you very much!

Very satisfying and informative! This is all what I wanna know. Thanks Colt!🙌🏼

I don't know but if this guy will teach any difficult thing . I'm gonna learn it.

My mind is blown, I learnt a lot from this tutorial. I was always afraid of webpack.

Great stuff!! That was really helpful. Thumbs up for Colt Steele.

Awesome! Best webpack video I've seen so far!

Awesome course. I might have to review it, but I can see why ppl like Colt Steele.

Very clear explaination!! thank you so much!!!

wow what a instructor .define every thing in depth details

Best Webpack tutorial I have viewed

Finally I find this to help me understand those mysterious webpack.config.js spells Thanks a lot for the tutorial, trying to cast some magic by those spells now...

Scary topic explained in a very simply and calmly. Love the tone of your voice @ColtSteele

Great overview! Really helped me wrap my head around everything. Thank you!