Question

我正在考虑将其中一个项目的大型本地构建脚本迁移到webpack。

它具有的一个功能是遍历/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来执行此操作吗？我想知道我是否必须编写自己的webpack插件，或者我是否可以配置现有的插件来做我想要的事情。

谢谢！

Answer 1

我认为您可以使用require.context和html loader完成此操作。

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
}

使用webpack嵌入HTML文件

1 个答案: