2

grunt を使用したプロジェクトを webpack に移動しています。

さまざまなファイルで HTML コンポーネントを再利用するために、HTML スニペットを頻繁に使用しています。

変数の受け渡しを必要としない HTML インクルードには、webpack html-loader を使用しています。

そうする人のために、私は口ひげとhtml-loaderを一緒に使用しています。

これはトップ レベルではうまく機能していますが、再帰的ではないため、別のスニペットを含むスニペットはインクルード コードを表示するだけで、補間された HTML は表示しません。

実演する最も簡単な方法は、問題を実演する簡単なレポを作成することでした: 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 つのインクルードは問題なくインポートされます。

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/ フォルダーで確認してください。ここで私が間違っていることを誰かが見ることができますか?

あなたの時間と助けをありがとう;）

4

1 に答える 1