有没有办法使用html网页包插件包含部分内容？

我正在使用Webpack编译我的脚本和HTML（使用

HTMLWebpack插件

）。问题是，我有5个包含相同部分的HTML文件，我想将这些部分移动到单独的

.HTML

文件中，然后在每个HTML文件中包含

这些部分。这样，如果我将更改这些较小的HTML文件，它将重新编译每个HTML文件以表示这些更改

默认情况下，Webpack对.js文件执行此操作，但我可以对HTML文件使用类似的操作吗？
您可以在模板中使用
。这里的示例：
您可以在模板中使用
。这里的示例：
另一个稍微不同的解决方案

使用
html加载程序
和
interpolate
选项


{test://\（html）$/，
包括：path.join（uu dirname，'src/views'），
使用：{
加载器：“html加载器”，
选项：{
插值：真
}
}
}

然后在html页面中，您可以导入部分html和javascript变量


${require（'./partials/top.html'）}
家
${require（'./partials/nav.html'）}
${require（'../js/html variables.js'）。您好}
${require（'./partials/footer.html'）}

html variables.js
如下所示：

const hello='hello！'；
const bye='bye！'；
导出{你好，再见}

唯一的缺点是，你不能像这样从
HtmlWebpackPlugin
导入其他变量（至少我找不到导入它们的方法），但对我来说这不是问题，只需在html中编写标题或使用单独的javascript文件来处理变量。
另一个稍微不同的解决方案

使用
html加载程序
和
interpolate
选项


{test://\（html）$/，
包括：path.join（uu dirname，'src/views'），
使用：{
加载器：“html加载器”，
选项：{
插值：真
}
}
}

然后在html页面中，您可以导入部分html和javascript变量


${require（'./partials/top.html'）}
家
${require（'./partials/nav.html'）}
${require（'../js/html variables.js'）。您好}
${require（'./partials/footer.html'）}

html variables.js
如下所示：

const hello='hello！'；
const bye='bye！'；
导出{你好，再见}

唯一的缺点是不能像这样从
HtmlWebpackPlugin
导入其他变量（至少我找不到导入它们的方法），但对我来说这不是问题，只需在html中编写标题或使用单独的javascript文件来处理变量。
查看更优雅的内容。它允许您设置HTML文件，并将其包含在与所需内容类似的内容中，如：

plugins: [
  new HtmlWebpackPlugin(),
  new HtmlWebpackPartialsPlugin({
    path: './path/to/partials/body.html'
  })
]

还可配置添加位置，如头部与身体、打开与关闭，并允许您传入变量。
查看更优雅的内容。它允许您设置HTML文件，并将其包含在与所需内容类似的内容中，如：

plugins: [
  new HtmlWebpackPlugin(),
  new HtmlWebpackPartialsPlugin({
    path: './path/to/partials/body.html'
  })
]

还可配置添加位置，如头部与身体、打开与关闭，并允许您传入变量。
如何为每个部分添加模板特定变量？您可以对其进行字符串替换
下一行是
非常粗糙的方法，但是现在找不到更简单的解决方案。你可以尝试使用-这类似于
gulp file include
Minor note on this-当使用Webpack 4时，你会得到一个错误：破坏更改：当使用loader时，不再允许省略“-loader”后缀。-因此，内联的require必须是
@klewis
npm安装——save dev html loader
起作用。不要将加载程序添加到网页包配置中，否则它将干扰
html网页包插件
。如何为每个部分添加特定于模板的变量？您可以对它们进行字符串替换
下一行是
非常粗糙的方法，但是现在找不到更简单的解决方案。你可以尝试使用-这类似于
gulp file include
Minor note on this-当使用Webpack 4时，你会得到一个错误：破坏更改：当使用loader时，不再允许省略“-loader”后缀。-因此，内联的require必须是
@klewis
npm安装——save dev html loader
起作用。不要将加载程序添加到网页包配置中，否则它将干扰
html网页包插件
。接下来，我找到了如何从HtmlWebpackPlugin导入其他变量的方法。使用，然后可以使用test://\.html$/，使用：[{loader:'ejs html loader'，选项：{htmlWebpackPlugin:htmlWebpackPlugin}}，{loader:'html loader'，选项：{interpolate:true}]
interpolate
已被删除，文档中没有等效的示例：接下来，我找到了如何从HtmlWebpackPlugin导入其他变量。使用，然后可以使用test:/\.html$/，使用：[{loader:'ejs html loader'，选项：{htmlWebpackPlugin:htmlWebpackPlugin}}，{loader:'html loader'，选项：{interpolate:true}                 }]
interpolate
被删除，文档没有一个等效的示例：这样你就必须在webpack配置文件中显式指定任何部分，否则我会错过一些东西？当你准备好将它们包含在index.html中时会很麻烦…不是吗？这样的想法是你甚至不再有index.html文件，并且可以避免出现较大的错误