这一节用来学习在自定义的index.html中，我们引入图片后webpack对其的处理。
对图片的处理分为两种情况：
1.在css中通过url引入图片资源，用url-loader（webpack4）、asset（webpack5）处理
2.在html中创建img标签引入图片资源，用html-loader处理
css图片资源处理
1.在index.html创建两个div用来引入我们的图片：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack study</title>
</head>
<body>
<h1>hello webpack</h1>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
2.我们在index.css中对这两个box进行样式处理，并且记得这个index.css是在index.js中被引入的，毕竟index.js才是我们的入口文件
#box1{
width:200px;
height:200px;
background-image: url('../assets/img/yanzi01.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
#box2{
width:200px;
height:200px;
background-image: url('../assets/img/yanzi02.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
3.因为webpack并不会处理我们的图片，所以我们得利用下loader进行处理：
webpack5中不再使用url-loader，但是我们先书写webpack4使用url-loader的示例
（1）在webpack4中，可以使用url-loader，注意url-loader中依赖file-loader，所以我们要同时安装url-loader和file-loader，然后在webpack.config.js中对url-loader进行配置:
- 安装
npm i url-loader file-loader -d - 配置
url-loader：
base64可以减少请求数量，减轻服务压力，图片体积会更大（缺点：文件请求速度会更慢）
{
test:/\.(jpg|png|gif)$/,
loader:'url-loader', //只使用一个loader的使用可以这样写
options:{
publicPath:'./img',//相对打包后index.html的图片位置
//输出到build中的目录img下
outputPath:'img/',
//图片大小小于24kb,就会被base64处理，实际上8-12kb的图片比较适合用成base64
limit:25*1024,
//默认文件名是一段哈希值+后缀
}
},
webpack命令运行，可以看到我的目录下多了一个img目录，其中yanzi02.jpg因为大于25kb就直接输出成图片，默认命名是哈希值+后缀名，而yanzi01.jpg并压缩转换成了base64，所以在之后放到服务器上后，我们只需要请求一个图片，减少了一次http请求次数：
（2）在
webpack5中我们使用assets-module，因为在v5中url-loader已经被废弃：要是也想实现根据文件大小来选择生成base64还是直接输出文件，我们选择的
资源模块类型是assets，loader配置如下：
{
test:/\.(jpg|png|gif)$/,
type:"asset",
//解析
parser: {
//转base64的条件
dataUrlCondition: {
maxSize: 25 * 1024, // 25kb
}
},
generator:{
//与output.assetModuleFilename是相同的,这个写法引入的时候也会添加好这个路径
filename:'img/[name].[hash:6][ext]',
//打包后对资源的引入，文件命名已经有/img了
publicPath:'./'
},
},
webpack命令执行，可以看到build目录同样生成了一个img文件夹，里面只有一个yanzi02.jpg：
5.最后看看页面效果，当当当！喻言yyds！
html中图片资源处理
下载一个html-loader，让html-loader对html文件先进行字符串处理然后交给asset资源模块或者url-loader进行图片资源处理
error: 我目前使用的webpack版本是5.38.1，如果我采用url-loader的方式不采用asset对图片进行处理的话，不知道为什么在对html的图片资源打包后引入的路径是正确的但是就是显示不出来，我暂时没有想到解决办法
1.npm i html-loader -d
2.在index.html中用img引入一个gif图片，这个图片大于25kb的：
<body>
<h1>hello webpack</h1>
<div id="box1"></div>
<div id="box2"></div>
<img src="./src/assets/img/yanzi03.gif" alt="喻言">
</body>
2.loader进行的配置：
{
test:/\.html$/,
loader:'html-loader',
}
最后可以看到效果：
