webpack4打包html中img后src为“[object Module]”问题，已解决
首先复习一下Webpack4打包图片的三种方式
1. JS中路径赋值
1 import logo from './logo.png' // 把图片引入，返回的结果是一个新的图片地址 2 let image = new Image(); 3 console.log(logo) 4 image.src = logo; // 图片路径赋值 5 document.body.appendChild(image);
2. CSS中的背景图片
div{
background: url("./logo.png");
}3. HTML中<img>标签
1 <!DOCTYPE html>
2 <html >
3 <head>
4 <meta charset="UTF-8"/>
5 <meta name="viewport" content="width=decvice-width, initial-scale=1.0"/>
6 <meta http-equive="X-UA-Compatible" content="ie = edge"/>
7 <title>这是标题</title>
8 <style>body{background: pink;}</style>
9 </head>
10 <body>
12 <div>内容项</div>
13 <img src="./logo.png" alt="logo3"/>
14 </body>
15 </html>使用 html-withimg-loader 结合url-loader / file-loader 加载器实现项目中的路径解析。
1 {
2 test: /\.html$/, // 正则匹配html结尾的文件
3 use:'html-withimg-loader'
4 },
5 {
6 test: /\.(png|jpg|gif)$/, // 正则匹配图片文件
7 // 做一个限制，当图片小于多少Byte时，将图片转成base64格式的字符串
8 // 否则用file-loader产生真实的图片
9 use: {
10 loader: 'url-loader',
11 options: {
12 limit: 500*1024，//大于或等于 500*1024Byte，按照相应的文件名和路径打包图片
13 name:'images/[name]-[hash:5].[ext]' //images:图片打包的文件夹；
14 //[name].[ext]：设定图片按照本来的文件名和扩展名打包，不用进行额外编码
15 //[hash:5]：项目中如果两个文件夹中的图片重名，打包图片就会被覆盖，加上hash值的前五位作为图片名避免重名。
16 }
17 }
18 },问题:
打包后发现只有HTML中<img>标签中的图片加载不出来。
查看该图片打包后的路径信息： src="{"default":"[hash:5].png"}"
且控制台输出：
GET http://localhost:xxxx/%7B%22default%22:%22[hash:5].png%22%7D 404 (Not Found)
原因是file-loader在新版本中esModule默认为true，因此手动设置为false
use: {
loader: 'url-loader',
esModule: false, // 这里设置为false
}这样就可以正常打包了。