如何使用 webpack 将 html、js 和 css 捆绑在一个 html 文件中? [英] How to bundle html, js and css in one html file with webpack?

问题描述

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

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.

当我使用 pagestest 进行测试时，我的大部分问题不在于加载文件，而是将它们作为单个文件加载.

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

如何将 html、css 和 js 打包到一个 index.html 中，以便避免 http 开销?

How do I pack my html, css and js into a single index.html, so I can avoid http overhead?

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

Webpack or any webpack plugin is better, since we are already using it.

感谢您对此的任何指导.

Thanks for any direction on this.

推荐答案

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

I use html-webpack-plugin inject the output from Webpack into a index.html file.

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

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.

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