Я перемещаю проект, который использовал grunt, в веб-пакет.
Я использую 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>
Первые два включения импортируются без проблем.
Третий, рекурсивный. 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 / для результата. Кто-нибудь может увидеть, что я делаю здесь не так?
Большое спасибо за ваше время и помощь;)