url-loader不能處理html中引入的圖片問題的解決方案

伯涵發表於2018-08-26
HTML

在我們使用webpack進行專案構建的時候，url-loader是個非常有用的工具，

與file-loader相比，url-loader能將圖片大小在limit限定值之內的將圖片轉譯成base64格式的字串，

這樣能直接減少很多不必要的http請求，在應用效能提升上的效益還是非常可觀的。

我們專案中引入圖片的方式基本上可以分為三種：

1、在js中import圖片然後賦值給圖片的src屬性

import logo from '../img/logo.png';
document.getElementById('box').src = logo;
複製程式碼

2、css中設定元素背景圖片

.box{background-image: url(../img/logo.png)}
複製程式碼

然後在js中通過import ‘@/css/index.css’的形式引入

3、在html的img標籤中直接寫入src屬性，且一般是相對路徑

<img src="img/logo.png" />
複製程式碼

對於前兩種情況，由於都是通過import的方式引入的圖片和css檔案，因此圖片能得到正確處理，但是第三種請況是得不到處理的。

解決方案：

在配置中加入html-withimg-plugin

1、下載：npm install html-withimg-plugin --save-dev

2、在html-webpack-plugin的配置中加入如下配置：

new WebpackHtmlPlugin({
        filename: item,
        template: 'html-withimg-loader!'+path.resolve(__dirname, 'src/html/index.html'),
        chunks: ['js/common', name]
    })
複製程式碼

完成配置後再次編譯就會發現html中引入的圖片也得到了相應的處理


更多配置資訊可以參考我之前的部落格：juejin.im/post/5b52a2…

github倉庫地址：github.com/SailorCai/m…


相關文章