在html中引入img圖片

Document1

使用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默認(rèn)為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í)有所幫助，也希望大家多多支持腳本之家。

總結(jié)

以上是生活随笔為你收集整理的img打 webpack_webpack打包html里面img后src为“[object Module]”问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。