安装 url-loader
npm i url-loader file-loader -D
file-loader 是依赖包。
在images 文件夹放一个图片 ,test.jpg
配置 规则如下:
module: {//这个节点用于配置所有的第三方模块加载器
rules:[//所有第三方模块的匹配规则
{test: /\.css$/,use:['style-loader','css-loader']}
//test 代码是匹配规则, 我们用的是.css 需要用 loader 处理。
,{test: /\.less$/,use:['style-loader','css-loader','less-loader']}
//由于less 文件也是一种样式,也是需要用到 css 处理模块
,{test: /\.(jpg|png|gif|bmp|jpeg)$/,use:['url-loader?limit=2200&name=[hash:4]-[name].[ext]']}
]
},
第三个就是配置URL的,
- 我们匹配的格式比较多 jpg|png|gif|bmp|jpeg ,如果不能满足可以继续添加
- 'url-loader 用这个处理转化
- limit=2200, 当图片小于2200bytes 才需要转化为base64编码,
- name=[hash:4]-[name].[ext]’ 这个是自定义图片的名字, 前四位为hash值后边连接图片的真是名字,ext 后缀的名字
创建 图片的引用
//css 文件加入下边内容
.box{
width: 400px;
height: 400px;
background: url("../images/test.jpeg");
background-size: cover;
}
//index.html 加入
<div class="box">
</div>