使用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 
}