我正在使用 Webpack 编译我的脚本和 HTML（使用 html-webpack-plugin）。问题是，我有 5 个包含相同部分的 HTML 文件，我想将这些部分移动到单独的 .html 文件中，然后将 include 这些部分移动到每个 HTML 文件中。这样，如果我要更改这些较小的 HTML 文件，它将重新编译每个 HTML 文件以表示这些更改。
Webpack 默认对 .js 文件执行此操作，但我可以对 HTML 文件使用类似的内容吗？
【问题讨论】：
您可以在模板中使用<%= require('html!./partial.html') %>。此处示例：https://github.com/jantimon/html-webpack-plugin/blob/master/examples/custom-template/template.html
【讨论】：
<% var template = require('html!./partial.html')%> 下一行是 <%=template.replace('${someVar}', someVar)%> 相当粗略的方法，但现在找不到更简单的解决方案。
gulp-file-include 类似
<%= require('html-loader!./partial.html') %>
npm install --save-dev html-loader 可以解决问题。不要将加载器添加到 webpack 配置中，否则会干扰html-webpack-plugin。
另一种略有不同的解决方案。
将html-loader 与interpolate 选项一起使用。
https://github.com/webpack-contrib/html-loader#interpolation
{ test: /\.(html)$/,
include: path.join(__dirname, 'src/views'),
use: {
loader: 'html-loader',
options: {
interpolate: true
}
}
}
然后在 html 页面中你可以导入部分 html 和 javascript 变量。
<!-- Importing top <head> section -->
${require('./partials/top.html')}
<title>Home</title>
</head>
<body>
<!-- Importing navbar -->
${require('./partials/nav.html')}
<!-- Importing variable from javascript file -->
<h1>${require('../js/html-variables.js').hello}</h1>
<!-- Importing footer -->
${require('./partials/footer.html')}
</body>
html-variables.js 看起来像这样：
const hello = 'Hello!';
const bye = 'Bye!';
export {hello, bye}
唯一的缺点是你不能像<%= htmlWebpackPlugin.options.title %>这样从HtmlWebpackPlugin导入其他变量（至少我找不到导入它们的方法）但对我来说这不是问题，只需写标题在您的 html 中或使用单独的 javascript 文件处理变量。
【讨论】：
interpolate 已删除，文档没有等效示例：github.com/webpack-contrib/html-loader/blob/…
查看Partials for HTML Webpack Plugin 以获得更优雅的东西。它允许您设置 HTML 文件并包含它们，就像您正在寻找的内容一样：
plugins: [
new HtmlWebpackPlugin(),
new HtmlWebpackPartialsPlugin({
path: './path/to/partials/body.html'
})
]
还可以配置添加位置，例如头部与身体，打开与关闭，并允许您传递变量。
【讨论】：