Learn Webpack Pt. 10: Extract CSS & Minify HTML/CSS/JS

This 10-part course teaches Webpack from scratch. 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 :)

[edmundchan]

For those who are using v7.3.0 or newer, sass-loader automatically compresses the output if the mode is in 'production'.
In the video, Colt was using an older version (7.1.0) hence the output wasn't minified (6:24) and that's why he installed the Optimize CSS Assets Webpack plugin. Hope this helps those who, like me at first, are confused why the need to install another plugin for minification when the output is already minified.

[siegblink]

At last, I've finished this tutorial series. But I will watch this again. There's just a lot of things to consume throughout the whole series.

[Stealthg]

You just know this is all good content. I’ll be back for this later.

[Ohhimark]

I'm new to webpack. Experienced 5 years IT professional but never got to touch this part of the codebase. This video series was really helpful. Thanks a lot.

[revillsimon]

This was easily one of the most valuable and informative tutorial series I've watched this year. As a previous student of your Udemy Web Development Bootcamp a number of years ago, which lead to me changing careers and getting my first development job, I naturally expected a good series. But this was far better than I expected! I appreciate all the time you have taken to make this, as I know from experience that creating content is a lot of work behind the scenes. Thanks again, Colt!

[RonPasillas]

I normally don't comment on YouTube, but I gotta say, this was a solid course. I went from viewing Webpack as a black box to not being afraid of it.

[marekostrowski]

The best free Webpack beginner course on YouTube currently in my opinion. Thanks for this content, waiting for more!

[siddheshmore]

Finally a tutorial that sheds some light on Webpack 4 while the rest of the internet is still discussing why the plugins they were used to in Webpack 3 are failing. Thanks dude.

[kulithnajika]

finished the series. watched all videos. keep up the greater work

[jayeshukalkar]

I wish i could comment on all 10 videos at a time. Its the perfect precised Knowledge about Webpack. Hatsoff to your efforts. I've downloaded all 10 videos for future reference.

[sergiumare]

Very good course fom all points of view, complexity, ways of explaining, time duration, exemples. Well done.

[codegully_channel]

The course is very well done. Thanks a lot for sharing it for free. It's worth a lot. I enjoyed it. Thank you for all the effort you put in.

[lookintomyeyes]

I have finished with the series replicating and modifying along with ur code base, thq so much for all the amazing content that u always present us with

[tonksonk]

This tutorial series was amazing, really sealed the deal for me understanding webpack!
I'm glad there's great people like you on YouTube who take the time to make detailed tutorials like these, keep up the great work, and of course I subscribed because of this series 👏

[usuamyanmarian]

I've finished! Woo! Thank you Mr.Steele for this tutorial, now I'm not that intimidated with webpack anymore.

[Даря-ьи]

This course is the best I've ever seen about webpack. It really makes all basic concepts clear and structured. I wish I could give it hundreds of likes. Thank you and looking forward to your new courses!

[UrbanBDKNY]

Great series. I am familiar with Webpack, but as with everything in programming that you don't use all the time...you forget a lot. You get the hang of it and then you maybe don't set up a new project for 2 years and forget it all lol

The entire series is great. Starting from scratch and showing how to gradually add loaders and plugins to make the development better is great as well as showing how to develop diff configs for development and production

Thanks for the hard work putting this together

[omostan]

First, I want to thank you for this amazing tutorial series and also for freely sharing it. Second, I just want to say that there a lot of amazing teachers on youtube. But on that long list, you certainly stand out to be one of my two favorites.

[complxmotion]

This is fantastic, thank you Colt! I must say, some of the features you covered are deprecated such as file-loader and 'clean-webpack-plugin' as they are included modules with Webpack 5. If you ever feel like making an updated version of this course, that would be awesome. Either way, thank you for putting in the time!

[BcomingHIM]

wow. one of a kind. Cant thank enough. I wish the basics ended here but there were more videos tracking more config options. Thank you very much Colt.