关于url-loader和file-loader的一个小坑

        第一次写文章，内心还是有点激动，我也是一个刚入前端坑的萌新，不知道我这篇文章对刚入webpack的坑的小伙伴有没有什么帮助，希望各位大佬轻点喷，这篇文章我也是想了很久才决定写的，因为我在这个坑上踩了很长时间，希望后面的人看到我这篇文章能避免这个坑。

       我们在使用webpack进行开发时，经常会用到图片，而引入路径无疑是一件非常令人头疼的事情，不知道多少人在这里撞过。

       当然，这篇文章中我也不会对file-loader和url-loader的功能做太过详细的介绍，如果想了解的小伙伴可以自行去百度。

       我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式和内容中的图片路径是相对于入口html页面的，而不是相对于我们原始的css文件和html文件所在的路径。这个问题是可以使用file-loader所解决的。如果图片较多，就会发很多http请求，这就会降低页面的性能。当然，这个问题我们也可以使用url-loader来进行解决。url-loader会将图片转换成base64字符串，再将这串字符打包到文件，最后只需要发送一次请求这个文件，就可以引用了。

好了以上就是背景，接下来进入正题：

       我是在做一个vue插件的时候。最初因为没有引用，所以在打包过程中也没有使用file-loader或是url-loader。当我在项目中新加入了图片，我就必须考虑打包方式了，最初在webpack配置中选择了file-loader来图片进行打包，因为最初路径没有设置好，导致图片不出来，刚开始百度谷歌各种方法都试过，还是不行，最后看到了url-loader这种图片打包方式，然后就直接引用了，本想着“既然我路径不对，我就把图片都转为base64，这样应该就不会出问题了”，可是结果还是不如我所愿，图片还是出问题了，没有显示，控制台也干干净净。不像网上说的什么图片找不到报404啊啥的。图片就是不出来，查看打包后的base64字符串，也尝试着把它还原成图片，结果图片还是不出来，朋友给我指出，这个可能是我使用url-loader的方式有问题，然后我去网上各种找教程各种百度，但是对url-loader的配置方式和我的都大相径庭，网上也找不到关于url-loader打包后的base64字符串的问题解释，没办法只能自己找答案了。最后，研究我的url-loader的配置时，看到了下面还有我写的file-loader配置，突发奇想，会不会是我写的file-loader有问题。我请教朋友，朋友说他也没遇到过，不过两个在一起应该不冲突，我想我还是自己试试，才能得出结论。于是我将关于file-loader的配置全部注释掉之后，再次进行打包，果然图片正常显示了。我的想法是对的，然后又去仔细研究了一下关于url-loader和file-loader之间的关系，网上只是指出了url-loader封装了file-loader，并没有提到两者同时引入的冲突问题。

       也许我这个问题在大佬眼中有些那啥，但是，这是我学习前端的过程中，又成功的填上了一个坑，所以我还是想分享给大家。

最后划重点：

“在使用webpack进行打包时，对图片路径的处理方法常用的有两种，一种是file-loader，一种是url-loader，当我们使用其中一种是，请把另一种删掉，不然会出现图片无法正常显示的问题，最关键的是，他还不给你报错，这是最气人的”