Встраивание файлов HTML с веб-пакетом

Я собираюсь перенести большой веб-скрипт для одного из наших проектов в веб-пакет.

Одна особенность, которую он имеет, - это прохождение /views каталог и копирует содержимое HTML-файлов в основную index.html файл. Это позволяет нам легко использовать шаблонную функцию KnockoutJS, не помещая все в один файл самостоятельно. Что-то вроде этого:

for relative_path, full_path in walk(os.path.join(base, "views")):
    with open(full_path) as f:
        index.append("""<script type="text/html" id="{0}">""".format(relative_path))
        index.extend(f)
        index.append("</script>")

В идеале я хотел бы иметь возможность сделать что-то вроде require('./views') и пусть он вставит каждый .html подать как <script type="text/html" id="views/foo">...</script>вставив текст в тег скрипта и установив id к пути к файлу. У нас есть почти 100 различных шаблонов, поэтому я хотел бы избежать require()в индивидуальном порядке.

Можно настроить html-loader или же html-webpack-plugin сделать это? Мне интересно, придется ли мне писать свой собственный плагин для веб-пакетов или есть ли способ настроить существующий плагин так, чтобы он делал то, что я хочу.

Спасибо!

1 ответ

Я думаю, что вы можете сделать это, используя require.context и загрузчик HTML.

function requireAll(requireContext) {
  return requireContext.keys().map(requireContext);
}
// requires and returns html files in the views directory
var modules = requireAll(require.context("./views", true, /^\.html$/));
modules.forEach(function(htmlTemplate){ 
   // code to add each template to document.body
}
Другие вопросы по тегам