img打 webpack_webpack打包html里面img后src为“[object Module]”问题

在html中引入img图片

Document1

使用url-loader/file-loader结合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'

}

发现打包后html里面，img的src为[object Module]，

但是如果使用"file-loader": "^4.2.0"或者"file-loader": "^2.0.0"却可以正常打包

后来发现file-loader在新版本中esModule默认为true，因此手动设置为false

{

test: /\.(png|jpg|gif|jpeg)$/,

use: [{

loader: 'url-loader',

// loader: 'file-loader',

options: {

esModule: false, // 这里设置为false

name: '[name].[ext]',

limit: 10240

}

}]

}

这样就可以正常打包了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

总结

以上是生活随笔为你收集整理的img打 webpack_webpack打包html里面img后src为“[object Module]”问题的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。