首先復習一下Webpack4打包圖片的三種方式
1. JS中路徑賦值
1 import logo from './logo.png' // 把圖片引入，返回的結果是一個新的圖片地址 2 let image = new Image(); 3 console.log(logo) 4 image.src = logo; // 圖片路徑賦值 5 document.body.appendChild(image);
2. CSS中的背景圖片
div{ background: url("./logo.png"); }
3. HTML中<img>標簽
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"/> 5 <meta name="viewport" content="width=decvice-width, initial-scale=1.0"/> 6 <meta http-equive="X-UA-Compatible" content="ie = edge"/> 7 <title>這是標題</title> 8 <style>body{background: pink;}</style> 9 </head> 10 <body> 12 <div>內容項</div> 13 <img src="./logo.png" alt="logo3"/> 14 </body> 15 </html>
使用 html-withimg-loader 結合url-loader / file-loader 加載器實現項目中的路徑解析。
1 { 2 test: /\.html$/, // 正則匹配html結尾的文件 3 use:'html-withimg-loader' 4 }, 5 { 6 test: /\.(png|jpg|gif)$/, // 正則匹配圖片文件 7 // 做一個限制，當圖片小於多少Byte時，將圖片轉成base64格式的字符串 8 // 否則用file-loader產生真實的圖片 9 use: { 10 loader: 'url-loader', 11 options: { 12 limit: 500*1024，//大於或等於 500*1024Byte，按照相應的文件名和路徑打包圖片 13 name:'images/[name]-[hash:5].[ext]' //images:圖片打包的文件夾； 14 //[name].[ext]：設定圖片按照本來的文件名和擴展名打包，不用進行額外編碼 15 //[hash:5]：項目中如果兩個文件夾中的圖片重名，打包圖片就會被覆蓋，加上hash值的前五位作為圖片名避免重名。 16 } 17 } 18 },
問題:
打包后發現只有HTML中<img>標簽中的圖片加載不出來。
查看該圖片打包后的路徑信息： src="{"default":"[hash:5].png"}"
且控制台輸出：
GET http://localhost:xxxx/%7B%22default%22:%22[hash:5].png%22%7D 404 (Not Found)
原因是file-loader在新版本中esModule默認為true，因此手動設置為false
use: { loader: 'url-loader', esModule: false, // 這里設置為false }
這樣就可以正常打包了。