如何使用webpack将html,js和css捆绑在一个html文件中?

问题描述 投票:17回答:2

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

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

html+css+js=index.html

如何将我的html,css和js打包到单个index.html中,这样我可以避免http开销?

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

感谢您的任何指导。

javascript html css webpack webpagetest
2个回答
18
投票

我使用html-webpack-plugin将Webpack的输出注入index.html文件。

假设您想要将所有这些文件内联到index.html的一个http请求中,您可以使用html-webpack-inline-source-plugin来实现此目的。


1
投票

无耻的插头传入

我发现webpack太重了,特别是当我已经使用browserify来内联我的require()时。所以我用JS的string.replacehttps://www.npmjs.com/package/inline-scripts编写了一个~30行的npm cli包。用法,$ inline-scripts src/index.html out/index.html

© www.soinside.com 2019 - 2024. All rights reserved.