webpack在管理模塊，處理各種資源上都是無往不利，但唯獨在處理html上比較困難，不識別html中img標籤src引入的圖片。
html-webpack-plugin這種插件輔助處理html非常好，但卻仍然未解決html代碼中的圖片問題，未免美中不足。在遍尋開源模塊無果後，認真研究webpack的loader和plugin後，終於解決了這個問題。
從npm安裝模塊
npm i html-withimg-loader --save
使用：
var html = require('html-withimg-loader!./xxx.html');
xxx.html代碼：
<!DOCTYPE html>
<html>
<head>
#include("./layout/layout.html")
<title>示例頁面</title>
</head>
<body>
<script type="text/template">
<div>dfde</div>
</script>
<img id='test2' src='images/logo.gif' />
<img id="test1" src="./images/test4.jpg" />
#include("./layout/scripts.html")
</body>
</html>
編譯結果爲：
<!DOCTYPE html><html><head><meta name="description" content=""><meta name="keywords" content=""><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>示例頁面</title></head><body><script type="text/template"> <div>dfde</div></script><img id='test2' src="/__build/images/logo_f7b644e2086e41139fa132fd229450f4.gif" /><img id="test1" src="/__build/images/test4_df538a9696eb4c032286f7f6bc0d1708.jpg" /><script src="https://static.yiji.com/resource/lib/jquery/1.7.2/jquery.min.js"></script></body></html>
img標籤的路徑會被url-loader處理，並且資源被添加到依賴，webpack會按照url-loader配置進行打包
細心的朋友應該注意到源碼裏面有兩句#include的語法，沒錯，模塊額外支持了include加載子頁面的功能~
那進一步的需求，在入口html頁面中也想享受這個功能怎麼辦呢？很簡單，結合html-webpack-plugin就可以了
plugins: [
new HtmlWebpackPlugin({
template: 'html-withimg-loader!' + path.resolve(srcDir, filename),
filename: filename
}),
]
然後瀏覽器中輸入地址的時候記得加上_build目錄，這裏的html纔是編譯過的，很多新手不知道這個，注意一下，如：
127.0.0.1:3001/__build/xxx.html
然後就看到正確的頁面了！
希望能幫到大家，如果模塊有問題，請務必告知以便修復，項目主頁：https://github.com/wzsxyz/html-withimg-loader