本节知识点

• 处理 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