Webpack簡單地將一堆Pug模板編譯爲HTML

我開始使用webpack，但是我不能爲我的生活制定出一個辦法，就是如何將一個文件夾（帶有可能的嵌套文件夾），全部的.pug模板，並簡單地將它們編譯爲靜態HTML並將它們放在輸出文件夾中，爲源模板文件夾中的每個輸出html文件維護任何嵌套的文件夾結構...Webpack簡單地將一堆Pug模板編譯爲HTML

我不想手動指定每個人。帕格文件，我絕對不希望webpack嘗試和解析到JS的.pugs，然後嘗試要求/導入任何img /字體等在帕格文件，然後抱怨它，我只是後一個基本的，靜態1 ：1編譯，pug文件，html文件輸出。爲什麼這麼做很難？

來源

2017-02-19 Matthew Prasinov

有可能用的WebPack但它更容易使用'gulp'如果你不主要是處理JS文件，而 –

ID不加杯和它的依賴到每一個項目，以及... 你說它可能w ith webpack，你能否詳細說明一下？ –

顯示您現有的webpack配置。你可以使用'function requireAll（r）{r.keys（）。forEach（r）; } requireAll（require.context（'./ src'，true，/ \。pug $ /））;'要求src文件夾下的每個.pug文件並配置'file-loader'來執行復制 –

使用pug-html-loader將.pug轉換爲.html文件。使用file-loader將文件複製到所需位置。不要使用html-loader，因爲您不想處理生成的文件使用的資源。

最後你會在你的裝載機的規則是這樣的（未經測試，的WebPack 1個語法，你可能需要調整它的WebPack 2）

{ 
    test: /\.pug$/, 
    loaders: ['file-loader?name=[path][name].html', 'pug-html-loader?pretty&exports=false'] 
}

接下來需要要求所有的哈巴狗文件的項文件

function requireAll (r) { r.keys().forEach(r); } 
requireAll(require.context('./', true, /\.pug$/));

來源

2017-02-20 03:12:16

好的哇，工作！謝謝。 –

我還有一個問題 - 比如說我使用'require.context（'./ pug /'，true，/ \。pug $ /）'這樣它在pug文件夾中查找，當前當我使用文件加載器'name = [path] [name] .html'查詢參數，這些模板被放到我的build目錄中的一個pug文件夾中。例如，如果某個源pug模板存在於'/ pug/home/template.pug'中，我最終得到'/ dist/pug/home/template.html'，但我希望它是'dist/home/template.html ' 是否有一種方法可以控制在文件加載器查詢字符串中輸出什麼[路徑]？ –

嘗試'file-loader？name = [path] [name] .html＆context =。/ pug'，您可能需要更改上下文參數以使其正常工作 –

Webpack簡單地將一堆Pug模板編譯爲HTML

回答

相關問題