Learn Webpack - Full Tutorial for Beginners

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

[@Elluzive]

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

[@dailydevelopershow]

@@neilt1352 Hahaha

[@igorsushko1356]

"You can learn this 6 topics and work like frontend developer" - spoke they, haha

[@rethabilencheke2338]

@@neilt1352 Hahahaha

[@lycan2494]

no you are responsible for what you have done for yourself. not colt. not anybody else.

[@zarrar1825]

Innocent its a joke jeez who hurt you?

[@pouyajabbarisani]

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

[@nerdiloo9863]

LOL - you heard that webpack geniuses???

[@IndrakumaraSirisena]

Me too

[@vigneshpugaz8308]

Me too :)

[@VeaceslavBARBARII]

1:50:19 We've just scratched the surface 😅

[@madhousenetwork7765]

you are not alone :D :D

[@CodeGoblin]

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.

[@vijaynavale1079]

thanks buddy

[@Andre-px6hu]

thanks a lot man, I didn't understand why my images weren't loaded ahaha

[@abdallahabdedaiem51]

I've just fixed devtool, and was curious if anyone had same issue, then I've ssen this. You Rock!

[@jasonhoi85]

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)

[@pranavc747]

1:11:53 merge is being imported as a named function {merge} now instead of default const merge = ...

[@asoluka_tee]

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.

[@zionsandeep788]

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!

[@TazExprez]

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.

[@jordanski5421]

Thanks that fixed my issue, where did you get that info? I'm interested in finding out exactly why this change occurred.

[@ahmetozturk5178]

@@jordanski5421 check the official docs

[@jordanmowry9164]

Thanks. I was stuck for a while and couldn't figure out how to move forward.

[@LyadhKhorEngineer]

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

[@CalmedByNature]

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

[@joelfernando9905]

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

[@dangolekhayotango1656]

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

[@mehulgala07]

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

[@kevinwagner5023]

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

[@lilrex2015]

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.

[@AshishKumar-UI]

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

[@yunusde]

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

[@permanar_]

IKR DAMN😂

[@lycan2494]

too bad u only scratched the surface

[@lubomirpacheliev363]

@@lycan2494 what do you mean *trembles*

[@lycan2494]

@@lubomirpacheliev363 u should be frightened!

[@alibek1545]

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"

[@mehra.akshit]

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

[@ayushsaini9798]

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

[@andrsgarc]

thanks I was looking for this comment :D

[@psychoedge]

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

[@matthewstaton6810]

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

[@Same7ashY]

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.

[@sashengovender2401]

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

[@chiragparyani7546]

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

[@YinonOved]

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

[@Spykerel04d]

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

[@AlexanderDemin]

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

[@JoseNario]

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

[@onlyjan9327]

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

[@aadisriram]

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!

[@asmasupih5344]

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.

[@jordanlewis3530]

To anyone reading comments after me, around the 1 hr 15 mark, the script "start": "webpack-dev-server --config webpack.dev.js --open" should now instead read: "start": "webpack serve --config webpack.dev.js --open"

[@GuilhermeCarvalhoOnline]

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

[@DarrenLewisHarris]

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

[@VikasTawniya]

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

[@benjaminmoseslieb9856]

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

[@alvin_lal]

Please note that file-loader is deprecated as of webpack 5 , it has been replaced by Asset Modules which comes built in with webpack 5. So for those of you whose images are not being included correctly , remove file-loader module from webpack.common.js while keeping the html-loader and add { test: /\.(svg|png|jpg|gif)$/, type: "asset/resource", }, Also, add assetModuleFilename: "images/[name].[hash][ext]" to the output field of webpack.prod.js to generate filenames with hash like output: { filename: "main.[contenthash].js", path: path.resolve(__dirname, "dist"), assetModuleFilename: "images/[name].[hash].[ext]", }, And also add assetModuleFilename: "images/[name][ext]" to webpack.dev.js to avoid generating hash while on development mode , like output: { filename: "main.[contenthash].js", path: path.resolve(__dirname, "dist"), assetModuleFilename: "images/[name][ext]", },

[@mohammedelfeky5321]

thank you finally it worked

[@Georgy-iq5rm]

you saved me, thanks you bro

[@ORNSTAIOAO]

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

[@prafullaraichurkar4369]

The content and the structure of this course is Amazing! Thank you Colt :)

[@roydonk2878]

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.

[@dankokozar]

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

[@bssushmitha6534]

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

[@martinpenev6750]

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

[@senthilkumaripaulsami5737]

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.

[@Anf3lKun]

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.

[@juang_]

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.

[@sachindev0072002]

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

[@fer86bd]

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

[@nikhilhukkerikar6753]

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!

[@MrFunasty]

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

[@mttrchrds]

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.

[@kestonneunie]

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!

[@noraneco6762]

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!

[@anmolrastogi380]

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

[@vcizek6047]

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

[@lightningresaba146]

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!

[@alishokrollahi3310]

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

[@luancardosolc]

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

[@tylercode2207]

You are really a good teacher...This is one of the best tutorials out there in general...Keep up the good work brother!

[@Lammot]

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?

[@JoaquinAlcerro]

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

[@aj98767]

1:15:17 where he changed the start script. If you're using webpack 5 then it should be 'webpack serve' instead of 'webpack-dev-server'. I just thought that watching this course while scanning the official docs really helped me alot.

[@najneindustrijaliziraniji]

thank you man.

[@georgeputnam4850]

Just what I needed. Awesome introduction to Webpack!

[@ricardodasilva9241]

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.

[@theYOFFLISES]

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.

[@vasshe]

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

[@balanceiseverything2565]

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

[@TS-qf2km]

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

[@red_cape.]

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!

[@distantstorm88]

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.

[@anamkhuram9596]

For webpack-dev-server, use "webpack server --config webpack.dev.js" instead (the commmand has changed) Also, if you want to use --open, do it in the webpack.dev.js by adding devServer: { open: true, }, If you want to use it in the CLI command, you'll have to specify the browser name but the prob is that browser name accepted is different in each OS. But if you specify it in the config file (webpack.dev.js) with true, it'll open in the default browser

[@johnhenryjohnhenry-tz8xm]

isn't it 'webpack-serve'?

[@srinivasb3845]

Highly recommend this video to get started with webpack.

[@noopurp123]

If you are using webpack-cli > 4.0.0 and webpack-dev-server >= 3.11.0, use the following command in the package.json to use webpack-dev-server: "start": "webpack serve --config webpack.dev.js"

[@johnhenryjohnhenry-tz8xm]

webpack-serve

[@mohantalachutla6834]

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

[@justinturner2271]

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

[@Canardeur]

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

[@maiaklimenko6614]

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!

[@kylehenson2259]

actually one of the best webpack tutorial , i appreciate it

[@tmchecki8610]

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

[@navead30]

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

[@kerryd2060]

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

[@glennsep]

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

[@gabrielfono844]

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.

[@bodhisatwabarma1156]

Where do you apply for these interviews ? Help out a bro from the 3rd world 😬

[@thecodecatalyst]

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

[@pixycz]

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!

[@saddamhossain6270]

Great tutorial. he has explained everything properly where everyone can understand.

[@abhishes]

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

[@farhan_jiwani]

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.

[@anand_dudi]

wow what a instructor .define every thing in depth details

[@igorsushko1356]

Amazing clear tutorial! thank you very much!

[@WarriorOfPiece]

I really appreciate all the videos you guys upload

[@LS-jv4uh]

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

[@lukababu]

That was well explained. I encountered a few issues where instead of [contentHash] I had to write [contenthash], and when doing an import of const CleanWebpackPlugin = require("clean-webpack-plugin"); I had to instead declare as an object as const {CleanWebpackPlugin} = require("clean-webpack-plugin"); One thing I'm left wondering is how do I create my webpage? I have a template.html, but I have a whole site I need to develop, like contact.html products.html etc...

Hi sir, did you find a solution for the problem? Do you want to share it :>

[@bensont5455]

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

[@tachyonbeats1527]

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

[@saumyaverma9581]

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

[@seephor]

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

[@lllumineux]

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

[@stefsmet]

Wow! Thank you so much for this tutorial! By far the best explanation out there! Any tips for how to add babel and typescript?

[@pulserudeus7968]

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

[@bhaaratsharma6023]

This guy is one of the best tutors out there.

[@shubhamshekhar23]

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