使用webpack嵌入HTML文件

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 
}