5.使用url-loader加载图片资源

知识回顾：

上节学习了使用file-loader加载图片文件，使用方式也比较简单，跟css-loader一样，只需要在配置文件的rules数组下添加

```
    {
        test: /\.jpg$/,
        use: 'file-loader'
    }
```

就可以加载jpg文件，遇到的问题是图片不能正常显示，原因是网站的根目录跟index.html文件的根目录不一致，解决方案是在output对象下添加publicPath: 'output'

url-loader

除了可以使用file-loader加载除了代码以外的文件，还可以使用url-loader加载。

url-loader通过Data URLs协议将文件打包，除了可以打包js、html文件，还可以打包图片、font文件。如果是图片文件，加载器会将图片用base64转码。

第一步还是先安装url-loader

完成后修改webpack.config.js文件里面匹配jpg文件的地方将use的值修改为'url-loader'，然后打包，打包完成打开生成的bundle.js文件，找到最后一个导出模块，可以看到图片已经被转成一串字符串，而不是以路径的形式出现。

url-loader还可以设置属性，指定文件大小小于多少使用url-loader，如果文件大于指定数值将自动使用file-loader，具体配置如下：

```
{
    test: /\.jpg$/,
    use: {
        loader: 'url-loader',
        options: {
            limit: 10 * 1024    //10 KB
        }
    }
}
```

这里使用10KB作为一个临界值

• 超出10KB的文件单独提取存放
• 小于10KB的文件转换为Data URLs嵌入代码中

最佳实践是：

• 小文件使用Data URLs，减少请求次数。
• 大文件使用file-loader单独提取存放，提高加载速度

需要注意的是：使用此方式需要确保安装了file-loader，否则就会报出一个找不到file-loader的错误

Data URLs协议

上图是Data URLs对媒体类型文件解析之后的格式

上图是对html文件解析之后的格式

不管是什么类型的文件，格式都是一样的，只是文件类型和编码不一样