0

我正在考虑将我们的一个项目的大型本地构建脚本迁移到 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 插件，或者是否有办法配置现有插件来做我想做的事。

谢谢！

4

1 回答 1

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
}
于 2016-07-13T23:12:16.540 回答