webpack 處理html中img的src引入的圖片
阿新 • • 發佈：2018-12-23
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
然後就看到正確的頁面了！