递归 html-loader 包括不工作

Question

我正在将一个使用 grunt 的项目转移到 webpack。

我经常使用 HTML 片段来在各种文件中重用 HTML 组件。

对于 HTML 不需要传递变量的包含我正在使用 webpack html-loader.

对于那些我同时使用 mustache 和 html-loader 的人。

这在顶层运行良好，但不是递归的，因此包含另一个片段的片段只显示包含代码，而不是内插的 HTML。

最简单的演示方法是创建一个简单的 repo 来演示问题： https://github.com/JamieMcDonnell/webpack-html-loader

我的 HTML 模板是：

<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
      <%= require('html-loader?interpolate!./snippets/no-variables.html') %>
      <%= require('mustache-loader!html-loader?interpolate!./snippets/variable.html')({someVariable: 'MY VARIABLE'}) %>
      <%= require('html-loader?interpolate!./snippets/recursive.html') %>
  </body>
</html>

前 2 个 include 导入没有问题。

第 3 个，recursive.html，看起来像：

<h1>I am a top level include</h1>
<%= require('html-loader?interpolate!./sub/sub.html') %>
<%= require('mustache-loader!html-loader?interpolate!./sub/variable.html')({someVariable: 'MY SUB VARIABLE'}) %>

sub/sub.html 和 sub/variable.html 非常简单，应该可以工作。我想我缺少属性或启用递归加载或其他功能的东西，但找不到它。

请检查 /dist/ 文件夹中的结果。谁能看出我在这里做错了什么？

非常感谢您的宝贵时间和帮助；）

Answer 1

您需要像

一样导入嵌套文件

${require('html-loader?!./sub/sub.html')}
${require('mustache-loader!html-loader?!./sub/variable.html')({someVariable: 'MY SUB VARIABLE'})}

递归 html-loader 包括不工作

recursive html-loader includes not working

mustache

webpack

webpack-html-loader