file-loader与url-loader的区别

file-loader与url-loader的区别
相同点：file-loader与url-loader都是在webpack中引入图片的解决方案。
不同点：

1、file-loader：返回的是图片的public URL。
2、url-loader：与file-loader不同，url-loader可以在图片大小小于设定的limit的时候返回的是一个bDataURL（base64码），大于limit时会调用file-loader对图片进行处理。

两者关系:
简单说url-loader封装了file-loader，但url-loader不依赖于file-loader。
url的工作情况分两种情况：
1.文件大小小于limit参数，url-loader将会把文件转为DataURL；
2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。因此我们只需要安装url-loader即可

踩坑经历：
问题：我使用的是file-loader，当我在项目中使用webpack-dev-server开始完毕后，页面所有图片浏览正常。然后使用webpack将项目打包出来后，页面中的所有图片加载失败。
原因：
1、经过webpack打包后，我的所有的资源都打包在一个js文件，此时图片的路径是相对入口html文件，而不是原来的文件。
2、我的webpack生产配置文件中的output中使用了publicPath,那么就导致了所有的图片的加载路径都是基于publicPath,导致文件404
解决方案：webpack生产配置文件中将output中pubicPath去掉或者将publicPath修改为打包文件目录。