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

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.

Griseous

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.

Formularize

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. – Septal

@Septal 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 github.com/jantimon/html-webpack-plugin#plugins – Formularize

Note: For it to work in Webpack 4, you need to take extra steps: github.com/DustinJackson/html-webpack-inline-source-plugin/… – Ulaulah

The package says that it is no longer maintained and Facebook provides a similar plugin. I don't find anyone talking about this plugin. – Confederacy

thats very old and do not work with any new version – Punish

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

Amorphism

Hello, why your code isn't open sourced please ? – Torpedo

It is, github.com/mahhov/inline-scripts, I simply haven't linked the git repo in the npm package.json – Amorphism