关于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,当我们使用其中一种是,请把另一种删掉,不然会出现图片无法正常显示的问题,最关键的是,他还不给你报错,这是最气人的”