本节知识点
- 处理 CSS中引入图片的问题
(一) 把图片写入CSS文件
- (1) 在src文件夹下面创建一个images文件夹然后把图片拷过去
然后在 CSS文件里面写入代码
#picture{
background:url(../images/b.jpg) no-repeat left center;
width: 343px;
height:147px;
}
(二) 安装file-loader 和url-loader这两个loader
- 安装file-loader和url-loader
npm install file-loader url-loader --save-dev
说明 file-loader :解决引用路径的问题，拿background样式引用URL的背景图来说明。我们都知道webpack最后会将各个模块打包成一个文件。因此我们的URL路径是相对入门HTML页面的，而不是原始的css文件所在的路径。所以图片加载必然会导致失败。这个问题用的就是file-loader来解决。
说明url-loader : 如果图片太多。会发出很多HTTP请求，会降低页面性能，这个问题通过url-loader来解决。URL-loader会将引入的图片编码，解析成dataurl相当于把图片数据翻译成一串字符。再把这个字符打包到文件中。最终只要引入这个文件就能访问图片了。如果图片太大了，会消耗性能。因此url-loader提供了一个limit参数 小于这个参数则会打包成dataurl大于limit则还会用file-loader进行copy
- 安装完成后 配置webpack.json这个文件
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.(jpg|png|gif)/,
use:[
{
loader:"url-loader",
options:{
limit:1048576
}
}
]
}
]
}
- test:/.(jpg|png|gif)/, 是匹配文件的后缀名
- use: 使用什么模块
- options里面的limit : 是把小于1048576b(相当于1M)变成base64的格式，写入js
为什么只用了url-loader
- 我们需要了解url-loader和file-loader使用关系
- 简单来说url-loader封装了file-loader，url-loader不依赖于file-loader.
- 文件小于limit参数url-loader会把文件转换成base64
- 文件大于limit参数url-loader会调用file-loader参数进行处理。参数也会直接传递给file-loader
