Webpack Config Basics - 7. Html Webpack Plugin

In this video I show you how to setup the Html-Webpack-Plugin so that we can now totally get rid of our dist folder and use one html file to template out our separate pages.

[@franco-cespi]

Thanks a lot! We have been building an app that uses a very hand-tailored config for webpack. Your videos helped me a lot to understand what was written before me and also allowed me to improve a lot the codebase by the uses of this HTML plugin and other things that you expand in this series of tutorial.

[@alenngk]

I like your approach, you show up basics and then build up on that, this is the best way to learn something new for me. Others just type code and than explain why is that the best, in their opinion, and move on.

[@side_Seven]

Thanks! I appreciate it! I agree with you, I found those kind of videos taught me how to 'copy' not the how and why of what it was I was doing.

[@wengeance8962]

please make more videos thanks, they're very helpful, i dont care what you makes videos about. I just know that it's going to be helpful. thanks.

[@side_Seven]

Wow that's one of the best compliments I've ever gotten! Will do!

[@khaledfares8377]

Great video dude.

[@indianpixelguy]

Can use html-webpack-plugin and add all bundles in some order ?
I am creating angular 1 app using webpack, i want to first add vendor first and then i want to add my app code, how we can do that ?

[@side_Seven]

Hey!
If you check out the docs for html-webpack-plugin you'll see the 'chunksSortMode' option which determines how it sorts the bundles. By default it does auto, and in my experience it usually does it in the correct order.
However you can write a function as well if you find you need to manually alter the order.

[@NarleyBrittes]

Hi Matthew. How would you configure webpack when index.html has html fragments? Say for example the header and the footer are fragments that get injected into index (ie.: ).

[@side_Seven]

Hey! The answer is less webpack specifically and more to do with using the html loader. It has many different options and support for all sorts of templating engines. It's really easy to setup if you look through the docs
github.com/webpack-contrib/html-loader
But I'm definitely open to doing a video on it if you think it would help.

[@NarleyBrittes]

Thanks for your reply Matthew. It would be nice to a video on the subject.

[@ruipeng1624]

Good work! Thanks!

[@kennethburla]

so after i build my webpack project it will automatically generate those js and html?

[@side_Seven]

Correct! Just be aware though, this video is from Webpack 1.

[@kennethburla]

thanks man you explain things simple but clear .very helpful

[@cmcuna]

Ty bro

[@kishormaharjan9321]

waiting for next video..

[@jorgericaldi6438]

great! thank you

[@linda1328]

this way solve the problem
ERROR in Error: Child compilation failed:
Module not found: Error: Can't resolve 'C:\Users.....
tks