rapid prototyping with webpack or similar

Question

I am wondering if there is a rapid prototyping tool that I can use to speed up static html and css development.

My workflow normally is to build the html and css first before any programming. I normally build the pages one by one and separate common elements into includes to keep it dry.

In the past I used PHP or something else to include everything together.

I am wondering if I can achieve this with webpack.

• I will have 1 html file / page
• In each html file I need to include html fragements from other static files
• I need LESS compilation ( I can do this with webpack )
• I also need hot-reload for css ( this is easy )
• I also need the hot-reload to work when I change an html fragment ( e.g. header of footer ) I need the whole page to reload

is there something out there I could use to do this ?

Thanks for looking

Answer 1

Use the HTML Webpack Plugin and a template engine of your choice which supports fragments/partials.

Check out The template option of the HTML Webpack Plugin.