webpack的資源打包(html中引入的資源和css中引入的資源)配置使用問題

最近在做一個webpack小項目的文件打包情況

碰見的問題如下:
1、html中的img的src引入爲[‘object, module’]的情況
2、對於css打包文件資源引入出錯問題引入路徑正確,但是圖片的放置地址出錯

首先對於問題1情況如下:
在這裏插入圖片描述
圖片地址打包是正確的情況
在這裏插入圖片描述
這個問題的出現原因是因爲file-loader的版本太高,我目前開發時最高版本5.1,於是我將file-loader的版本降爲4.1.0後問題解決。
在這裏插入圖片描述

針對問題2這種情況我也找了很多解決方法。

首先找到問題在於html打包時和CSS打包時都是走的url-loader進行打包的而其中設置的額limit限制會將小於該值的打包進CSS目錄下,而大於該值的會打包到設置的路徑下, 我這裏是按照原路徑輸出的。在這裏插入圖片描述
所以這是一種情況導致出錯的原因,但是因爲引入圖片時咱們也不能考慮圖片大小而進行不同的引入(使用CSS引入還是html引入),所以設置limit是不太行的。
於是便繼續查找問題的真正根源在於圖片打包後的路徑放錯了
因此最終的解決方案在解析css或者scss是設置路徑, 如下圖
在這裏插入圖片描述

於是問題得到解決。

希望大家遇到打包問題的時候能夠去自己思考問題和查找問題的思路,同時也可以多看看官方文檔的詳細結束。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章