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.

Answer 2

If you have a lot of need for this, maybe you should build your own tool that is suited to your needs.

Here are some possible options that you might consider:

• express and some templating engine (pug or mustache)
• webpack with HTML Plugin as suggested by @floriangosse
• grunt or gulp with watcher plugins for compiling your templates and stylesheets
• browserSync for reloading stuff in the browser

I would go with webpack since it provides a lot of this out of the box (+ loaders). I found it helpful to create a small repository that contains webpack configurations for dev, production and some base configuration you can inherit from, a public folder with your html and either npm scripts or some gulp/grunt file for firing it up.

edit I am not suggesting to build your own tool but rather your own customized tool suite