51

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.

Kannaiyan
  • 12,554
  • 3
  • 44
  • 83

2 Answers2

35

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.

andykenward
  • 924
  • 7
  • 17
  • Newbie question here, why do I need to add html to webpack? I thought we were only concerned with css and js optimization to reduce network requests. – PirateApp Dec 19 '18 at 04:17
  • 2
    @PirateApp the html-webpack-plugin does a lot more than reduce the size of your entry `index.html` file that loads `.js` & `.css`. It's too much to cover in a comment. But the basic usage of it is to help update the `.html` file with the output from webpack if you hash the outputs e.g `main.1s8h3.css`. This tends to change on every webpack build when you change your source css. It also supports html template languages and has loads of plugins https://github.com/jantimon/html-webpack-plugin#plugins – andykenward Dec 19 '18 at 14:01
  • 2
    Note: For it to work in Webpack 4, you need to take extra steps: https://github.com/DustinJackson/html-webpack-inline-source-plugin/issues/63#issuecomment-515963062 – phil294 Jul 29 '19 at 12:04
  • 2
    The package says that it is no longer maintained and Facebook provides a similar plugin. I don't find anyone talking about this plugin. – Yairopro Jul 05 '20 at 11:50
12

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

junvar
  • 11,151
  • 2
  • 30
  • 46