这两个 loader 都是用来处理图片资源的，只不过处理方式不同，最佳方式是将两者结合起来使用！！
(1) file-loader
file-loader的工作原理是把物理文件拷贝到打包输出的目录下。用户访问该资源时，还是会向我们的服务器发起请求，我们将资源返回进行呈现。
但需要注意一点：
- 记得把图片资源的请求地址统一起来。需要进行相关配置如下：
原理如下
(2) url-loader
url-loader的原理是把文件转化为一个 dataUrl 的形式，直接嵌入代码中，这样的话，图片资源就可以直接用， 就不要向服务器发起请求来获取资源了！！！
dataUrl 的格式：
栗子：
webpack内部使用的栗子：
缺点：
- 资源体积较小的，转换为 dataUrl 的格式比较合适
- 资源体积较大的，就不合适了，太占内存了，有违打包工具压缩代码的初衷！！！
所以：
就可以对 url-loader 进行相关配置，加上条件
(3) 两者配合起来使用
在 webpack5 里，
file-loader和url-loader已经内置了，不需要我们再手动下载配置，只需要做一些简单配置即可！！
