How to bundle html, js and css in one html file with webpack?

Question

I have built my application with webpack merging all css into one file, all js into one file and having one html for my SPA app.

When I do my testing with webpagetest most of my issues is not with loading the files but loading them as individual files.

html+css+js=index.html

How do I pack my html, css and js into a single index.html, so I can avoid http overhead?

Webpack or any webpack plugin is better, since we are already using it.

Thanks for any direction on this.

Answer 1

I use html-webpack-plugin inject the output from Webpack into a index.html file.

Assuming you mean you want to inline all those files into one http request of index.html you can use html-webpack-inline-source-plugin to achieve this.

Answer 2

shameless plug incoming

I found webpack too heavy weight, especially when I'm already using browserify to inline my require()'s. So I wrote a ~30 line npm cli package using JS's string.replace: https://www.npmjs.com/package/inline-scripts. Usage, $ inline-scripts src/index.html out/index.html