在PHP中,您可以包含文件片段以实现易于重用。在下面的示例中,我可以包含header.php
和footer.php
。这非常方便,因为当我更新header.php
时,使用它的所有页面都会显示更改:
<html>
<body>
<?php include 'header.php';?>
<p>Some text.</p>
<p>Some more text.</p>
<?php include 'footer.php';?>
</body>
</html>
我已经成功地尝试了这个答案中所提到的方法,使用了html-webpack-plugin
,但是有一个问题。请见下方的配置:
const HtmlWebpackPlugin = require("html-webpack-plugin");
const fs = require("fs");
module.exports = () => ({
// ... lots of Webpack boilerplage
module: {
rules: [
// ... js, sass, json, etc loaders
]
},
plugins: [
//...
new HtmlWebpackPlugin({
inject: false,
hash: true,
template: "./static/index.html",
header: fs.readFileSync(htmlPath + "/header.html"),
footer: fs.readFileSync(htmlPath + "/footer.html"),
filename: "index.html",
}),
]
});
这使我能够像这样包含我的
.html
文件:<html>
<body>
<%= htmlWebpackPlugin.options.header %>
<p>Some text.</p>
<p>Some more text.</p>
<%= htmlWebpackPlugin.options.footer %>
</body>
</html>
乍一看,它的工作表现符合预期,但是包含的
header.html
和 footer.html
文件会被“锁定”在初始状态,如果我修改它们,我仍然会得到原始文件,而不是更新后的版本。我必须关闭 Webpack 开发服务器,然后重新运行才能使更改生效。我猜测这是因为 fs.readFileSync()
仅在初始化 Webpack 时执行,但在检测到文件更改后并不会再次执行。我该怎么做才能更新这些文件呢?