webpack打包html里面img后src為“[object Module]”問題
更新時間：2019年12月22日 11:36:27 作者：LDP_Rou
這篇文章主要介紹了webpack打包html里面img后src為“[object Module]”問題，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
在html中引入img圖片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document1</title> </head> <body> <div id="root" > <img src="./logo.jpg" alt=""> </div> </html>
使用url-loader/file-loader結(jié)合html-loader打包
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [{
loader: 'url-loader',
loader: 'file-loader',
options: {
name: '[name].[ext]',
limit: 10240
}
}]
},
{
test: /\.(htm|html)$/,
loader: 'html-loader'
}
發(fā)現(xiàn)打包后html里面，img的src為[object Module]，
但是如果使用"file-loader": "^4.2.0"或者"file-loader": "^2.0.0"卻可以正常打包
后來發(fā)現(xiàn)file-loader在新版本中esModule默認為true，因此手動設(shè)置為false
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [{
loader: 'url-loader',
// loader: 'file-loader',
options: {
esModule: false, // 這里設(shè)置為false
name: '[name].[ext]',
limit: 10240
}
}]
}
這樣就可以正常打包了
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS實現(xiàn)漂亮的窗口拖拽效果(可改變大小、最大化、最小化、關(guān)閉)
這篇文章主要介紹了JS實現(xiàn)漂亮的窗口拖拽效果,具有可改變大小、最大化、最小化、關(guān)閉等功能,以完整實例形式較為詳細的分析了JavaScript操作窗口的大小改變、還原及關(guān)閉等功能的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2015-10-10
頁面滾動條處于低端,點擊回到頂部，并且隱藏掉，具體實現(xiàn)代碼如下，感興趣的朋友可以參考下哈2013-06-06
這篇文章主要介紹了Listloading.js移動端上拉下拉刷新組件的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
JavaScript中遍歷跳出循環(huán)方法總結(jié)
這篇文章主要給大家介紹了關(guān)于JavaScript中遍歷跳出循環(huán)方法的相關(guān)資料,一想到想到循環(huán)的跳出,立馬就會想到三個關(guān)鍵,break、return、continue,在業(yè)務(wù)中也會需要在遍歷的時候退出循環(huán),需要的朋友可以參考下2023-12-12
在頁面數(shù)據(jù)處理的過程中都會不可避免的使用字符串的截取操作,下面這篇文章主要給大家介紹了關(guān)于js字符串截取指定字符前面/后面的字符串,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-06-06
javascript GUID生成器實現(xiàn)代碼, 需要的朋友可以參考下。2009-10-10
JavaScript實現(xiàn)form表單的多文件上傳
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)form表單的多文件上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
原生Js實現(xiàn)元素漸隱/漸現(xiàn)(原理為修改元素的css透明度)
大家經(jīng)?？吹骄W(wǎng)頁里圖片漸變顯示，自己寫一個。原理很簡單就是修改元素的css透明度，具體實現(xiàn)代碼如下，感興趣的各位可以參考下哈，希望對大家有所幫助2013-06-06
JS實現(xiàn)json對象數(shù)組按對象屬性排序操作示例
這篇文章主要介紹了JS實現(xiàn)json對象數(shù)組按對象屬性排序操作,涉及javascript使用sort方法針對json數(shù)組的遍歷與排序相關(guān)操作實現(xiàn)技巧,需要的朋友可以參考下2018-05-05
JavaScript去除空格的幾種方法...2006-10-10