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

Question

I created my application with webpack , combining all css into one file, all js into one file and one html for my SPA application.

When I do my testing with webpagetest, most of my problems are not downloading files, but downloading them as separate files.

html+css+js=index.html

How can I pack html, css and js into one index.html so that I can avoid the overhead on the page ?

Webpack or any webpack plugin is better since we already use it.

Thanks for any direction.

Answer 1

I use html-webpack-pluginto insert the output from Webpack into the index.html file.

, http- index.html, html-webpack-inline-source-plugin .

Answer 2

, - , browserify, require(). , ~ 30- cli JS string.replace: https://www.npmjs.com/package/inline-scripts. , $ inline-scripts src/index.html out/index.html

Answer 3

You can do it:

<link rel="stylesheet" href="YourCssFile.css">

<script src="YourJavascriptFile.js"></script>

<!--Your HTML code -->

Run codeHide result

This will import all css and javascript from these files. But he does not use webpack.