webpackでHTMLファイルを埋め込む

Question

私たちのプロジェクトの1つである自宅作りの大規模なビルドスクリプトをwebpackに移行しようとしています。

1つの機能は、/viewsディレクトリをトラバースし、htmlファイルの内容をメインのindex.htmlファイルにコピーすることです。これにより、私たちはKnockoutJSのテンプレート機能を、すべてを1つのファイルにまとめることなく簡単に使用できます。このような何か：

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')ような何かを行うと、それは、スクリプトタグにテキストを注入し、ファイルパスにidを設定し、<script type="text/html" id="views/foo">...</script>として各.htmlファイルを埋め込む持ってできるようにしたいと思います。私たちはほぼ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 
}