Webpack 中 file-loader 和 url-loader 的区别

一、图片处理常见的加载器有几种？

1. file-loader
2. url-loader
3. image-webpack-loader

二、file-loader，url-loader 的理解和区别

当我们基于webpack进行开发时，在页面引入图片（包括img的src和background的url）,就会遇到一些问题。

 

问题1:引用路径的问题

拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。

问题2:如果图片较多，会发很多http请求，会降低页面性能

这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURL。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURL，大于limit的还会使用file-loader进行copy。

 

url-loader和file-loader是什么关系呢？

url-loader封装了file-loader。url-loader不依赖于file-loader，即使用url-loader时，只需要安装url-loader即可，不需要安装file-loader，因为url-loader内置了file-loader。通过上面的介绍，我们可以看到，url-loader工作分两种情况：1.文件大小小于limit参数，url-loader将会把文件转为DataURL；2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。因此我们只需要安装url-loader即可。

vue-cli创建url-loader的工程中配置如下：

{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
}

小于10k的图片在img下不会有图片文件，而是直接把图片的base64值写到html引入图片的地方

大于10k的图片会放在img下，需要的时候通过http请求下载