一起使用文件加載器和html-loader

我正在處理一個角度的應用程序，它需要提取html文件作爲純HTML文件，同時應檢查任何<img src="...">需要這些圖像（作爲資產）。另外，圖像基於根路徑（因此/images/something.png），它們需要相對於webpack context設置（基本路徑）進行解析。一起使用文件加載器和html-loader

我該如何做到這一點？無法使用html-loader與文件加載器一起玩。由於前者輸出一個JS文件（使用require語句），後者需要一個純HTML文件。

來源

2016-05-02 Fire-Dragon-DoL

我自己找到了解決方案，通過深入挖掘有關裝載機的源代碼。

基本上，默認情況下它不工作，因爲文件加載器需要一個「原始」文件，所以如果你想輸出一個HTML文件，你需要有html源代碼，而不是JS代碼。但是，html-loader需要一個HTML文件並輸出一個JS文件（使用require資產和內容）。

的解決方案是這一深深隱藏和美妙extract-loader其解析JS出來的HTML加載機，將其轉換回普通的HTML，資產仍然需要和與哈希甚至取代了緩存無效化。

這很完美，您將輸出傳遞給文件加載器，並最終獲得了html文件！

示例配置

就我而言，我的程序的配置是這樣的：

'file-loader!extract-loader!html-loader' + '?root=' + encodeURIComponent(sourcePath.toString())

來源

2016-05-02 22:46:52

你描述的解決方案，但沒有發佈的解決方案。配置示例？ –

'file-loader！extract-loader！html-loader'對我來說已經足夠了。請注意，對於html-loader我也使用''？root ='+ encodeURIComponent（sourcePath.toString（））' –

是的，我拉我的頭髮，找出爲什麼src =「/ url」開始被忽略，直到我讀該根網址的默認值被忽略。您使用了？root =，而我切換到了相對的網址。兩者都有效。謝謝。 –

一起使用文件加載器和html-loader

回答

相關問題