使用 webpack 嵌入 HTML 文件答案

【问题标题】：Embedding HTML files with webpack使用 webpack 嵌入 HTML 文件
【发布时间】：2016-11-16 16:55:46
【问题描述】：

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

谢谢！

【问题讨论】：

标签： javascript html webpack html-webpack-plugin webpack-html-loader

【解决方案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
}

【讨论】：