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.
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!
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.
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.
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!
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.
This tutorial series was amazing, really sealed the deal for me understanding webpack! I'm glad there's great people like you on UA-cam who take the time to make detailed tutorials like these, keep up the great work, and of course I subscribed because of this series 👏
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.
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.
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!
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 :-)
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
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!
@@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
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!
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!
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
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 :)
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!
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!
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.
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!
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
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)
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!!!
Is there a reason why you added the HtmlWebpackPlugin to optimization.minimizer in prod config but in dev config you added it to the plugins array? Had you put it inside the plugins array in the prod config would it still minify your html?
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 😎👍🏼
Just a quick question, suppose i have a react app and i am using the same class name for different elements across different Components and the class name has different style attribute for each Component, what is going to happen??
Because Bootstrap is a UI library split into JS and CSS different files. The CSS extract file holds the CSS part of Bootstrap, so its styling, while vendor.js holds all the Bootstrap JavaScript logic, including opening menus on click, showing tooltips, opening and closing modals etc.
Instead of initializing HtmlWebpackPlugin under the 'optimization' property, can we continue to put it under 'plugins'? This way, the default JS minification wouldn't be overriden right?
How would I add an external CDN like font-awesome? In a non-webpack project, I'd just add it as a link tag. But how would I add it to your completed project?
Hello, I have one question. I have been working on a static website. Which uses Grunt in combination with Handlebars to generate HTML. Using 'Watch' to concatenate JS, Build CSS from SCSS etc. In Dev mode i develop HTML on a local server then with Build command i make minified CSS and JS and Build HTML for deployment. Can i do the same in Webpack or is it recommended?
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.
Thanks for the video,. In my projects I may have many css files, like main.css, vendor.css and theme.css etc.. Ok so Is there a way to out put different css files without creating/generating JS entry files?
@Colt Steele, one glitch in the code: as of now, proper import for CleanWebpackPlugin would be like: *const { CleanWebpackPlugin } = require('clean-webpack-plugin');* These changes are because they removed 'export default'. Thanks a ton for these great series, veeery helpful! :)
@@ichepurnoy thanks for the reply. I get it, remembering everything is impossible! In fact, now that a few days have passed i must go back and see if i even fixed the issue! (and if so, put the solution here!) Thanks anyway. If you find something along the way, lmk!
Hey Colt, thanks for the great course I have a question: when trying to extract the css with the MiniCssExtractPlugin I'm getting the following error: ERROR in ./src/scss/main.scss No template for dependency: CssDependency Google hasn't lead me to a satisfying solution nor really explained what this even means Could you help me?
ok I'm a stupid mf: i returned an object instead of an array in the plugins function. for anyone encountering this problem, it is almost certainly some syntax problem
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.
I was wondering the same thing. Thank you for your comment!
so we still have to use the loader for with css-loader for .css files ri8?
very good explanation!
just incase for anyone using webpack -v>5 use `css-minimizer-webpack-plugin` instead of Optimize CSS Assets Webpack plugin
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.
You just know this is all good content. I’ll be back for this later.
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!
I normally don't comment on UA-cam, but I gotta say, this was a solid course. I went from viewing Webpack as a black box to not being afraid of it.
The best free Webpack beginner course on UA-cam currently in my opinion. Thanks for this content, waiting for more!
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.
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.
Wow man, that was the best 2 hours I've ever spent on UA-cam. Thanks for this series!!
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!
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.
This tutorial series was amazing, really sealed the deal for me understanding webpack!
I'm glad there's great people like you on UA-cam who take the time to make detailed tutorials like these, keep up the great work, and of course I subscribed because of this series 👏
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.
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.
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.
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!
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 :-)
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
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!
@@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
finished the series. watched all videos. keep up the greater work
I've finished! Woo! Thank you Mr.Steele for this tutorial, now I'm not that intimidated with webpack anymore.
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!
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!
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
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 :)
Thanks for the mini course , really helped me reinforce what I already knew !! great stuff as usual!
Very good course fom all points of view, complexity, ways of explaining, time duration, exemples. Well done.
What a gold mine this is !! Such an amazing course !!
The best course I've seen. Thank you so much. Now it's making sense and not so scary.
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.
By Far the Best webpack Tutorial I came across; as always your teaching skills are outstanding! Great Job Colt.
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!
After this series of videos I understood how modern frameworks works. Thanks!
This is the best course on webpack I've found. Thanks Colt
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!
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.
Thanks a lot Mr. The best Webpack Course on UA-cam!
By far the best content on Webpack I've found. So helpful.
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!
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
I have seen the entire course :). Thanks so much, I'm now more aware of all of the different Webpack configuration options and usage.
Thank you for this one bro, god bless you
Bought your React Udemy course, I love how good you are at explaining things. Thank you boss.
What a grate course! Thank you so much! Waiting for your next course!
you should earn a gold medal for this tuts!!! thank you a lot! 🙏👏👍👌
by far the best intro to webpack out there, thank you very much!
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)
Excellent tutorial. Crystal clear explanation. Helped so much for a newbie like me. Thanks a bunch !!!
Amazing series! Thanks, Colt!
Thanks a ton for making this video series. Keep up the good work.
You're a great teacher Colt.
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.
fantastic!! love this tutorial! very helpful and like you said "just scratching the surface" thanks colt very much appreciate this!
Colt Steele is a Man Of Steel! Fantastic content Super-Teacher-Man :D
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
Best series on Webpack!
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 :)
Colt you are my new best friend!! Thank you so much for this tutorial. You have the gift of teaching. You saved my weekend!
just finished this playlist. I must say this is professional stuff. great to be your student
10:05 I don't why but actually there is no terser-webpack-plugin package with Webpack 5, so I have to install manually.
Hi Colt what your thoughts about babel? Ijust wandering do we need babel theses days?
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!
This is such a super-useful tutorial, I loved every minute of it! Thank you Colt!
What a precious series of tuts. Be Blessed.
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!!!
Is there a reason why you added the HtmlWebpackPlugin to optimization.minimizer in prod config but in dev config you added it to the plugins array? Had you put it inside the plugins array in the prod config would it still minify your html?
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 😎👍🏼
Thank you Colt. It got me up and running for the first time with webpack. cheers
I follow all the course and congrats! Best Webpack 4 tutorial so far.
Thank you for this awesome course Colt. When to use babel with webpack please ?
Great Series, loved it!!!
Just a quick question, suppose i have a react app and i am using the same class name for different elements across different Components and the class name has different style attribute for each Component, what is going to happen??
Why we have bootstrap twice now in production?
Once in vendor.js and once again in the css file.
Because Bootstrap is a UI library split into JS and CSS different files. The CSS extract file holds the CSS part of Bootstrap, so its styling, while vendor.js holds all the Bootstrap JavaScript logic, including opening menus on click, showing tooltips, opening and closing modals etc.
Thanks Colt for this series of interesting videos about webpack. It is very cool!
why is the HtmlWebpackPlugin inside of "optimization" instead of in "plugins" on the production config file
Instead of initializing HtmlWebpackPlugin under the 'optimization' property, can we continue to put it under 'plugins'? This way, the default JS minification wouldn't be overriden right?
This lecture deserves more views :)
Surprisingly I breezed thru these videos, love it.
great playlist !! great work steve.
Incredible job on this series, Colt - greatly appreciated! When you teach, I learn. Time to start your Advanced Web Developer Bootcamp on Udemy!
How would I add an external CDN like font-awesome? In a non-webpack project, I'd just add it as a link tag. But how would I add it to your completed project?
Hello, I have one question. I have been working on a static website. Which uses Grunt in combination with Handlebars to generate HTML. Using 'Watch' to concatenate JS, Build CSS from SCSS etc. In Dev mode i develop HTML on a local server then with Build command i make minified CSS and JS and Build HTML for deployment.
Can i do the same in Webpack or is it recommended?
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.
This is the best webpack Tutorial
any ideas on:
[webpack-cli] TypeError: MiniCssExtractPlugin is not a constructor ?? webpack v5.37.1
The whole tutorial was amazing! thank you very much for such a great content!
Many many thanks !!! All episodes rated with thumbs up :-)
finally i understand webpack :D thank you Colt!!
Thank you! You are a good teacher! I have learnt all your Webpack videos. They are very helpful.
Great introductory course. Thanks for sharing.
i bought yout bootcamp course on udemy, you are very good teacher, thank you for this too
incredible mini course dude.
This entire series is amazing. Thank you so much
Thanks for the tutorial. Would you tell me how to add multiple HTML pages to your project?
Thanks for the video,. In my projects I may have many css files, like main.css, vendor.css and theme.css etc.. Ok so Is there a way to out put different css files without creating/generating JS entry files?
Dude, as always - amazing work! Thank you for your help getting my head around this beasty of a tool! :D
For webpack 5 or above, it is recommended to use "css-minimizer-webpack-plugin" instead of the one mentioned.
Thanks for sharing this awesome course.
@Colt Steele, one glitch in the code: as of now, proper import for CleanWebpackPlugin would be like:
*const { CleanWebpackPlugin } = require('clean-webpack-plugin');*
These changes are because they removed 'export default'.
Thanks a ton for these great series, veeery helpful! :)
any ideas on the MiniCssWebpackPlugin? tried above on it but no go. get [webpack-cli] TypeError: MiniCssExtractPlugin is not a constructor error...
@@thekuzicartoon sorry, no ideas, I cannot memorize all possible tips and tricks. It's the same old googling and RTFMing , each time.
@@ichepurnoy thanks for the reply. I get it, remembering everything is impossible! In fact, now that a few days have passed i must go back and see if i even fixed the issue! (and if so, put the solution here!) Thanks anyway. If you find something along the way, lmk!
Hey Colt, thanks for the great course
I have a question: when trying to extract the css with the MiniCssExtractPlugin I'm getting the following error: ERROR in ./src/scss/main.scss
No template for dependency: CssDependency
Google hasn't lead me to a satisfying solution nor really explained what this even means
Could you help me?
ok I'm a stupid mf: i returned an object instead of an array in the plugins function. for anyone encountering this problem, it is almost certainly some syntax problem
Great content Colt, thanks for putting this up. This helped me a lot.