css-loader和file-loader/url-loader冲突无法显示图片

最近在调试的时候,同事反馈说图片没有展示出来,去看了以后简直莫名奇妙,因为我自认为对css-loader和file-loader的配置没有问题,难道css-loader又挖了什么坑?于是开始漫长的调试,测试过程。最终发现,问题是真的存在,而且我google了半天,恁是在国内外都没有找到靠谱的解决方法。调试过程中可以肯定的是,css-loader竟然自己把url()的图片生成到目录下了,然后file-loader又做了一遍:

这也就意味着一张图片被处理了两次,具体造成的问题是css-loader给的路径不对还是file-loader给的不对,就不想去深究,总之就是两个loader冲突了。按照我以前的理解,css-loader只负责把url()转化为require()的形式,并不负责生成真实的图片,然后file-loader可以识别require(image)的形式,并生成图片,两个loader分工明确。那么这里是为什么呢?于是,我把file-loader从rules中去掉,然后……图片竟然展示出来了!!

所以说,无论是css-loader的问题,还是结合webpack5一起的问题,现在webpack5+新版css-loader就可以自己把图片处理到目标目录下了。然而,问题在于,如果去掉file-loader,那么我们在js中是没有办法直接import一张图片作为url来使用的。这就矛盾了。而且检查了file-loader的配置,也没有接口可以让我们忽略对css文件中的图片进行排除。似乎就这样卡住了。

于是重新回去阅读文档。

果然,不独不知道,webpack5现在已经牛x到自己可以把非js的文件资源作为模块读取了。什么?不懂?意思就是,不需要file-loader了,webpack内置了工具!具体做法就是把我们配置文件中的 loader: 'file-loader' 一句改为 type: 'asset/resource' 就可以了。

webpack的rule.type在v4中就已经加入了,只是很少被用到,它的文档也说的不清不楚,我也不知道它有这个能力,而 asset/resource 也是到v5才悄悄加进去的,你可以查看v4的文档v5的文档的差异。

新增的asset这个选项就是对非js相关的资源的处理,它文档单独通过一节对这些项目进行解释,而且里面就明确提到可以代替以前的file-loader, url-loader, raw-loader,然而,大哥你虽然可以代替,但是直接破坏原来的效果,是不是有点不厚道呀!

已有2条评论
  1. ayu 2022-04-16 16:09

    Cool!

  2. rxliuli 2022-04-03 17:15

    来 vite 保平安(逃