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

javascript html css webpack webpagetest
Kannaiyan picture Kannaiyan · Oct 21, 2017 · Viewed 26.8k times · Source

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

andykenward picture andykenward · Oct 22, 2017

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.

Related questions

How to import CSS files into webpack?

According to the documentation, CSS file should just be imported. I am just starting with webpack and tried to import a CSS file but I get a message about a module missing: D:\Dropbox\dev\jekyll\blog>webpack --display-error-details …

Read More
Is the webpack style loader meant to load all css? Or just application specific css?

I'm trying to make my front-end design process more modular, and am exploring webpack. It supports a style loader, which allows you import a css file and inject it in the document like so: require("style/url!file!./file.css"); // =&…

Read More
Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More