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

[@edmundchan6601]

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.

[@pyoppyo]

I was wondering the same thing. Thank you for your comment!

[@lookintomyeyes2681]

so we still have to use the loader for with css-loader for .css files ri8?

[@carlosalbertobatistacruz]

very good explanation!

[@rhul0017]

just incase for anyone using webpack -v>5 use `css-minimizer-webpack-plugin` instead of Optimize CSS Assets Webpack plugin

[@siegblink182]

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.

[@Stealth4g63]

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

[@RonPasillas]

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

[@marekostrowski4378]

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

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

[@Ohhimark100]

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.

[@usua1myanmarian]

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

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

[@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

[@ColtSteeleCode]

Glad you liked it, Billy! It's really nice to hear from students who make it through the entire mini-course. As far as forgetting things... if I had to remake this Webpack demo from memory, I would have a really tough time. I constantly reference old code and previous examples when I'm working on something, especially Webpack because its syntax is so specific. So you are not alone in forgetting a lot!

[@UrbanBDKNY]

@@ColtSteeleCode dev life lol unless you create a new project every few months, you forget most of it. You remember a few things that stay, but specifics go lol I been working with webpack for like 5 years but usually just modified configs. I did not know how to start something from scratch. When you want to start a project and are excited, the last thing you want to do is spend time going through their docs to build a new config

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

[@tonksonk951]

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

[@siddheshmore231]

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.

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

[@rameshkomarasamy]

Colt! Thank you so much for this awesome tutorial. I couldn't just get out of my seat from tutorial 1 to up until here. You made my day. I'm very confident on webpack now. Thanks a lot again!

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

[@Даря-ь4и]

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!

[@kulithnajika2565]

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

[@kasrylewka]

I tried to get a a grasp of webpack several times and finally I have it ! Awesome explanation, thanks a lot! I am going to bundle all my projects straightaway :-)

[@gerardoparedes1299]

Thanks for the mini course , really helped me reinforce what I already knew !! great stuff as usual!

[@sergiumare7259]

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

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

[@Birandoo]

The best course I've seen. Thank you so much. Now it's making sense and not so scary.

[@abe10]

Wow man, that was the best 2 hours I've ever spent on KZbin. Thanks for this series!!

[@lookintomyeyes2681]

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

[@dimayasnohurskyi2805]

After this series of videos I understood how modern frameworks works. Thanks!

[@xlf14]

Excellent tutorial. Crystal clear explanation. Helped so much for a newbie like me. Thanks a bunch !!!

[@akashtakawale9074]

What a gold mine this is !! Such an amazing course !!

[@petrsimonek5362]

Colt, thank you for this. Planned to watch only one video and ended up watching the whole series, just because you are explaining things in an awesome manner. Thanks for the github code as well. All the best!

[@Brunoenribeiro]

Awesome course, man. I've been struggling with bundlers for some time because other tutorials just threw the configurations on me, instead of explaining each part. Thank you so much for taking the time. I'll share this with everyone I know :)

[@khotambakhromov]

Thanks a lot Mr. The best Webpack Course on KZbin!

[@leonf.7893]

This is the best course on webpack I've found. Thanks Colt

[@kresimircosic3753]

Bought your React Udemy course, I love how good you are at explaining things. Thank you boss.

[@kandebabou]

hi, just sharing an observation. It seems that if you are using webpack 5 in production mode, your css gets automatically modified by webpack. While following the course i noticed that my css was already bundled even without install the css minifier like colt. Then chatGTP confirmed it for me: In addition to that, webpack 5 has introduced a new feature called "production mode" which automatically enables the built-in optimization plugins, including the Terser webpack plugin for JS minification and the OptimizeCssAssetsWebpackPlugin for CSS minification. So, you can use the production mode instead of installing the css-minimizer-webpack-plugin if you want to minimize your CSS.

[@alexhitchins4339]

you should earn a gold medal for this tuts!!! thank you a lot! 🙏👏👍👌

[@innalukomska4623]

Colt, thank you a lot for this step-by-step course, it's awesome! I've just used for last webpack version in scripts start command (package.json) 'webpack serve --config webpack.dev.js' instead of 'webpack-dev-server --config webpack.dev.js' and used curly braces for 'merge' and 'CleanWebpuckPlugin' const (webpack.prod.js) because of errors. So it's really helpful course. Thanks!

[@bradynglines5898]

I have to say, thanks so much for making this. This has really helped me jump into Webpack where it was a intimidating before, I feel much better after watching all of your explanations. Thanks again!

[@joe-un1ky]

By far the best content on Webpack I've found. So helpful.

[@nicolasvillafan]

By Far the Best webpack Tutorial I came across; as always your teaching skills are outstanding! Great Job Colt.

[@Vincent-xm2sf]

Oh God you’ve taught me everything i am recently looking for in an hour throughout this series. Ofc i need to practice it applying to my project from now on though lol. Big appreciation to you mate. Cheers!

[@jamiemackenzie9708]

This is great thanks!! I have built this out now and just basically reuse this project as my basic WP starter template, saves a bunch of time.

[@joseubaldocarvajal6472]

I have seen the entire course :). Thanks so much, I'm now more aware of all of the different Webpack configuration options and usage.

[@JassarDev]

It's either I'm high because this is the last video or these are just funny LOL! That "alright" at 4:55 says it all! 6:43 "large package, oh boy" Thank you so very much for this, it's amazing! A couple of notes: 1. It seems that the new version of webpack optimizes the css without having to use [insert long name here] plugin. 2. I'm going to look this up but it sounds like a good idea: using webpack with node and express (webpack-dev-server with nodemon)

[@Gamegamblerbitsadwar]

Great mini-course. Might need some updates but, the comment section was really helpful with that so you may not need any updates as such :)

[@CarlosLopez-tm7bp]

What a grate course! Thank you so much! Waiting for your next course!

[@olivercox6348]

Cheers Colt! you have really great content on your channel. I have found this series invaluable for my understanding of the fundamentals and possibilities of webpack. Really fired off those lightbulb moments I was missing from reading the docs

[@e11world]

I loved every minute of it. Definietly subscribed and hope to see more things from you especially on React and what you'd use for styling (instead of bootstrap/tailwind/bulma) if any obviously with scss.

[@throughdaniel]

fantastic!! love this tutorial! very helpful and like you said "just scratching the surface" thanks colt very much appreciate this!

[@kubilayorman]

by far the best intro to webpack out there, thank you very much!

[@maxnolano]

Colt Steele is a Man Of Steel! Fantastic content Super-Teacher-Man :D

[@AndresGarcia-lo4yr]

Colt you are my new best friend!! Thank you so much for this tutorial. You have the gift of teaching. You saved my weekend!

[@yanhuan1]

You're a great teacher Colt.

[@mohitdas5292]

Best series on Webpack!

[@israele.porfiriomoreno532]

Thank you very much for your work and dedication. This mini course was amazing for my learning about this fantastic world of web development. Greetings from Mexico!!!

[@geoffjames992]

Bit late to the party, but just wanted to say a huge thank you for this series! Super helpful and very easy to follow 🙌🏼🙌🏼🙌🏼. Just what I needed, as I'm building a couple of apps, and webpack seems to be the way forward for what I need. Saved the playlist to share with my dev friends and for me to come back to in future. New subscriber well-earned 😎👍🏼

[@kirkanos771]

What a precious series of tuts. Be Blessed.

[@DRocksRecords]

Thank you Colt. It got me up and running for the first time with webpack. cheers

[@BAHADIRDOGRU0]

This is best webpack tutorial i ever seen. Only i need as part 11. splitting js files and lazy import js files for keep small the bundle sizes. Thnx

[@Tony.Nguyen137]

This is the best webpack Tutorial

[@ankitgupta9067]

Thanks a ton for making this video series. Keep up the good work.

[@shadow_3213]

Many many thanks !!! All episodes rated with thumbs up :-)

[@marlynch]

Incredible job on this series, Colt - greatly appreciated! When you teach, I learn. Time to start your Advanced Web Developer Bootcamp on Udemy!

[@rogerpence]

Colt--Thank you very much for this great course. It really helped me get up to speed with WP. You did a great job on this in every regard!

[@chujingxl]

Thank you! You are a good teacher! I have learnt all your Webpack videos. They are very helpful.

[@warsame2245]

Surprisingly I breezed thru these videos, love it.

[@ladymelven]

This is such a super-useful tutorial, I loved every minute of it! Thank you Colt!

[@AbdulWahab-ev2ct]

just finished this playlist. I must say this is professional stuff. great to be your student

[@RazerCrick]

Very nice series, gave a lot of insights of the underlying things for CRA. I am having one query: How can we make build release process of a component inside a large app independent. I have a react app name: example inside that i have component-a component-b component-c How can i make independent deployment for component-c without deploying the whole app (i.e example here) ? thoughts i tried: - component-c i can put on npm but that again required update of package in main app once i release a new version of component-c. resulting in a new deployment of the whole app. - Hosting on something like bit.dev.

[@jorged1071]

The whole tutorial was amazing! thank you very much for such a great content!

[@wisnupratama5538]

finally i understand webpack :D thank you Colt!!

[@atilaesousa4230]

Thank you for this one bro, god bless you

[@silvanoteneyck2911]

Outstanding! This is the best overview on webpack I've seen yet. A great match to your Udemy Web Dev course. I have yet to sit down and study the videos but a few things stand out right now. 1. working with .ejs files? 2. working with a site that has multiple pages 3. deploying to a server... do you use .gitignore to exclude development files?

[@LinuxForLife]

I follow all the course and congrats! Best Webpack 4 tutorial so far.

[@AnnieTaylorChen]

just start to use this tool.... so happy to bump into a series that teaches more as I'm pretty confused about it's many config and setup.

[@vcoski]

Great introductory course. Thanks for sharing.

[@fedeviotti]

Thanks Colt for this series of interesting videos about webpack. It is very cool!

[@viniciusalvess]

Thanks for sharing this awesome course.

[@vikalindeman9315]

i bought yout bootcamp course on udemy, you are very good teacher, thank you for this too

[@parasjain1489]

Amazing content. And first time in my life, I have looked forward to the creator's subscribe or like statement. Ah, but not so annoying. Thanks, Colt.

[@sareek007]

Great Series, loved it!!!

[@Flame_Beard]

Dude, as always - amazing work! Thank you for your help getting my head around this beasty of a tool! :D

[@surisargam]

Thank you so much Colt, It really helps in my projects

[@jinwookkim8511]

This lecture deserves more views :)

[@humayraa3790]

This entire series is amazing. Thank you so much

[@dostoevskysuffer7232]

Thank you very much! Its a very good organized course

[@themynamesb]

great playlist !! great work steve.

[@aarondz789]

Your content is amazing.I love it.Thanks.

[@aealarco]

This was an amazing tutorial, thank you very much Colt

[@gurjeetbains3691]

Really good knowledgeable webpack tutorial. Thanks Colt

[@notalegendband]

Thank you so much for this tutorial! I've got some questions: 1) Can imports at the top of the common config be deleted? (specifically path & HtmlWebpackPlugin) 2) When the React course on Udemy will be available? I can't wait. 😊 Thanks in advance

[@comentarista-00]

Great course, Colt. Thank you!

[@matthewthemobiledj]

Wow, I learnt so much from this. Thank you Colt!

[@evanlouden]

Awesome. This is exact tutorial I was looking for on how to set up a modern build with webpack. Thank you! Maybe you could demonstrate the PurgeCss plugin, too?

[@GeorgeMonsour]

Colt, good to see your yt channel up and running. Enjoying your udemy course as well. This IS the best webpack course anywhere!! Would you cover the transform functionality especially babel? (having a hard time using features s/a async/await) Would you also consider (comment on) the comparative need/use of configure-less vs configurable bundlers ie. parcel, webpack?

[@debchakramajumder1217]

+1, I am also facing the same issue recently (having a hard time using async/await in a react-redux app)

[@soak2094]

Thank you very much, this series helped me a lot

[@mmmhenrique]

Thank you very much, mate! Cheers from Brrasil!

[@cloudninja8768]

You are the best teacher in the world. I loveeeeeeeeeee you sir :)

[@RobbSnor]

Thanks for this tutorial series, it helped me to better understand Webpack

[@shubhasingh7583]

Great content Colt, thanks for putting this up. This helped me a lot.

[@thethotatube]

You are not Colt Steele - You are Gold Steel ;-) Content like Gold And a Steel like resolve to deliver the Gold Thanks Colt. It was an awesome course. Minor suggestion : A video covering the transpilation with Babel / alternatives would have made this even better and complete IMHO. Thanks again !!