构建时如何将 HTML 导入 HTML？答案

【问题标题】：How to import HTML into HTML while build?构建时如何将 HTML 导入 HTML？
【发布时间】：2021-09-24 14:24:54
【问题描述】：

我有一个具有以下结构的项目：

my-site
├── home.html
├── about.html
└── shared
    ├── header.html
    └── footer.html

我的站点\home.html：

<html>
    <!-- Insert contents of .\shared\header.html here -->
    <span>home</span>
    <!-- Insert contents of .\shared\footer.html here -->
</html>

我的网站\about.html:

<html>
    <!-- Insert contents of .\shared\header.html here -->
    <span>about</span>
    <!-- Insert contents of .\shared\footer.html here -->
</html>

我的站点\shared\header.html：

<div>header</div>

我的站点\shared\footer.html:

<div>footer</div>

我需要一个构建操作来创建一个具有以下结构的dist 目录：

dist
├── home.html
├── about.html
└── shared
    ├── header.html
    └── footer.html

dist\home.html:

<html>
<div>header</div>
    <span>home</span>
<div>footer</div>
</html>

dist\about.html:

<html>
<div>header</div>
    <span>about</span>
<div>footer</div>
</html>

dist\shared\header.html 和 dist\shared\footer.html 的内容可能与它们的 my-app 对应项相同。

我的意图类似于this Medium post，但是，它使用客户端 JavaScript (document.onload) 来获取共享的 HTML。我想生成在单个 GET 中获取的静态 HTML 文件。

是否有任何已知的方法可以使用任何捆绑器来实现这一目标？

【问题讨论】：

标签： webpack parceljs

【解决方案1】：

使用handlebars-webpack-plugin 将handlebars partials 注入到您的车把模板中。用法示例见here。

【讨论】：