最近在调试的时候，同事反馈说图片没有展示【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】出来，去看了以后简直莫名奇妙，因为我自认【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。为对css-loader和file-lo原创内容，盗版必究。未经授权，禁止复制转载。ader的配置没有问题，难道css-lo【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。ader又挖了什么坑？于是开始漫长的调试【转载请注明来源】未经授权，禁止复制转载。，测试过程。最终发现，问题是真的存在，而【作者：唐霜】【版权所有】唐霜 www.tangshuang.net且我google了半天，恁是在国内外都没【本文受版权保护】【本文受版权保护】有找到靠谱的解决方法。调试过程中可以肯定转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。的是，css-loader竟然自己把ur著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】l()的图片生成到目录下了，然后file【未经授权禁止转载】未经授权，禁止复制转载。-loader又做了一遍：

这也就意味着一张图片被处理了两次，具体造【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net成的问题是css-loader给的路径不原创内容，盗版必究。本文作者：唐霜，转载请注明出处。对还是file-loader给的不对，就【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net不想去深究，总之就是两个loader冲突【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】了。按照我以前的理解，css-loade本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】r只负责把url()转化为require【未经授权禁止转载】【本文受版权保护】()的形式，并不负责生成真实的图片，然后【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】file-loader可以识别requi著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】re(image)的形式，并生成图片，两【转载请注明来源】【作者：唐霜】个loader分工明确。那么这里是为什么【版权所有】唐霜 www.tangshuang.net【作者：唐霜】呢？于是，我把file-loader从r【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。ules中去掉，然后……图片竟然展示出来著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net了！！

所以说，无论是css-loader的问题著作权归作者所有，禁止商业用途转载。【本文受版权保护】，还是结合webpack5一起的问题，现【作者：唐霜】未经授权，禁止复制转载。在webpack5+新版css-load转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.neter就可以自己把图片处理到目标目录下了。本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】然而，问题在于，如果去掉file-loa本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。der，那么我们在js中是没有办法直接i【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】mport一张图片作为url来使用的。这著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】就矛盾了。而且检查了file-loade本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。r的配置，也没有接口可以让我们忽略对cs未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.nets文件中的图片进行排除。似乎就这样卡住了【原创内容，转载请注明出处】【本文首发于唐霜的博客】。

于是重新回去阅读文档。本文作者：唐霜，转载请注明出处。

果然，不独不知道，webpack5现在已本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。经牛x到自己可以把非js的文件资源作为模【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net块读取了。什么？不懂？意思就是，不需要f著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。ile-loader了，webpack内本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】置了工具！具体做法就是把我们配置文件中的【未经授权禁止转载】【原创内容，转载请注明出处】 loader: 'file-loader' 一句改为 【原创内容，转载请注明出处】type: 'asset/resource' 就可以了。转载请注明出处：www.tangshuang.net

webpack的rule.type在v4【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】中就已经加入了，只是很少被用到，它的文档著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。也说的不清不楚，我也不知道它有这个能力，【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】而 asset/resource 也是到v5才悄悄加进去的，你可以查看未经授权，禁止复制转载。v4的文档【转载请注明来源】和转载请注明出处：www.tangshuang.netv5的文档转载请注明出处：www.tangshuang.net的差异。【原创不易，请尊重版权】

新增的asset这个选项就是对非js相关原创内容，盗版必究。原创内容，盗版必究。的资源的处理，它文档单独通过一节【关注微信公众号：wwwtangshuangnet】对这些项目进行解释，而且里面就明确提到可原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】以代替以前的file-loader, u【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。rl-loader, raw-loade【原创不易，请尊重版权】【原创内容，转载请注明出处】r，然而，大哥你虽然可以代替，但是直接破著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。坏原来的效果，是不是有点不厚道呀！