我使用 webpack 构建了我的应用程序，将所有 css 合并到一个文件中，将所有 js 合并到一个文件中，并为我的 SPA 应用程序提供一个 html。
当我使用webpagetest 进行测试时，我的大部分问题不是加载文件，而是将它们作为单个文件加载。
html+css+js=index.html
我如何将我的 html、css 和 js 打包到一个 index.html 中，以便我可以避免 http 开销？
Webpack 或任何 webpack 插件更好，因为我们已经在使用它了。
感谢您对此的任何指导。
【问题讨论】：
标签： javascript html css webpack webpagetest
我使用html-webpack-plugin 将 Webpack 的输出注入到 index.html 文件中。
假设您的意思是将所有这些文件内联到 index.html 的一个 http 请求中，您可以使用 html-webpack-inline-source-plugin 来实现此目的。
【讨论】：
.js 和 .css 的条目 index.html 文件的大小。在评论中涵盖的内容太多了。但它的基本用途是帮助更新 .html 文件，如果你对输出进行哈希处理，例如 main.1s8h3.css。当您更改源 css 时，这往往会在每个 webpack 构建中发生变化。它还支持 html 模板语言并拥有大量插件 github.com/jantimon/html-webpack-plugin#plugins
无耻插件来袭
我发现 webpack 太重了，尤其是当我已经使用 browserify 来内联我的 require() 时。所以我用 JS 的string.replace 写了一个~30 行的 npm cli 包：
https://www.npmjs.com/package/inline-scripts。
用法，$ inline-scripts src/index.html out/index.html
【讨论】：