在Webpack4时,我们要处理图片资源也要通过file-loader和url-loader进行处理
在Webpack5时,已经将两个Loader功能内置到Webpack里面了,我们只需要简单的配置
1.准备文件
准备三张图片,最好是有一张图片是小于10kb,下面扩展需要
编写css文件
.box1,.box2,.box3{
width: 100px;
height: 100px;
background-size: cover;
}
.box1{
background: url(../images/head_z.png);
}
.box2{
background: url(../images/i_close.png);
}
.box3{
background: url(../images/logo.png);
}
编写html文件
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
在配置文件添加
//处理图片资源
/