首先复习一下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 lang="en"> 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 }
这样就可以正常打包了。