如何使用 webpack 将 html、js 和 css 捆绑在一个 html 文件中？ [关闭]

Posted 2023-02-22

【中文标题】如何使用 webpack 将 html、js 和 css 捆绑在一个 html 文件中？ [关闭]

【英文标题】：How to bundle html, js and css in one html file with webpack? [closed]

【发布时间】：2018-04-02 15:16:11

【问题描述】：

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

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

html+css+js=index.html

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

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

感谢您对此的任何指导。

【参考方案1】：

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

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

【讨论】：

这似乎是一个解决方案，将尝试一下。

点赞！新手问题，为什么我需要在webpack中添加html，我以为我们只关心css和js优化以减少网络请求

@PirateApp html-webpack-plugin 的作用远不止减少加载 .js 和 .css 的条目 index.html 文件的大小。在评论中涵盖的内容太多了。但它的基本用途是帮助更新 .html 文件，如果你对输出进行哈希处理，例如 main.1s8h3.css。当您更改源 css 时，这往往会在每个 webpack 构建中发生变化。它还支持 html 模板语言并拥有大量插件 github.com/jantimon/html-webpack-plugin#plugins

注意：要让它在 Webpack 4 中工作，你需要采取额外的步骤：github.com/DustinJackson/html-webpack-inline-source-plugin/…

该包表示不再维护，Facebook 提供了类似的插件。我没有找到任何人谈论这个插件。

【参考方案2】：

无耻插件来袭

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

【讨论】：

您好，请问您的代码为什么不开源？

是，github.com/mahhov/inline-scripts，我只是没有在npm package.json中链接git repo