Search code examples
javascripthtmlcsswebpackwebpagetest

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

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.

Solution

  • 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.