如何将html，js和css与一个html文件绑定到webpack？ [英] How to bundle html, js and css in one html file with webpack?

问题描述

我用 webpack 构建了我的应用程序，将所有css合并到一个文件中，将所有js合并到一个文件中，并为我的SPA应用程序提供一个html。

当我使用webpagetest进行测试时，我的大多数问题都不是加载文件，而是将它们作为单个文件加载。

$ b

html + css + js = index.html

如何将我的html，css和js打包到一个index.html中，所以我可以避免http开销？

Webpack或任何webpack插件更好，因为我们已经在使用它。

感谢您对此的任何指示。

解决方案

我使用 html-webpack-plugin 将Webpack的输出注入到index.html文件中。假设你的意思是你想把所有这些文件内联到 index.html 的一个http请求中，你可以使用 $ b a href =https://github.com/Du stinJackson / html-webpack-inline-source-pluginrel =noreferrer> html-webpack -inline-source-plugin 来达到此目的。 p>

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.

解决方案

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.

这篇关于如何将html，js和css与一个html文件绑定到webpack？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！