如何在构建时将 HTML 导入 HTML？

Question

我有一个结构如下的项目：

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

my-site\home.html:

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

my-site\about.html:

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

my-site\shared\header.html:

<div>header</div>

my-site\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 文件。

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

Answer 1

使用handlebars-webpack-plugin to inject handlebars partials into your handlebars templates. Example usage can be found here.

如何在构建时将 HTML 导入 HTML？

How to import HTML into HTML while build?

webpack

parceljs