2

我正在将一个使用 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 个包含导入没有问题。

第三个，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/ 文件夹以获取结果。谁能看到我在这里做错了什么？

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

4

1 回答 1

1

您需要导入嵌套文件，例如

${require('html-loader?!./sub/sub.html')}
${require('mustache-loader!html-loader?!./sub/variable.html')({someVariable: 'MY SUB VARIABLE'})}
于 2020-02-17T21:04:28.800 回答