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

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

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

 

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

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