最近在调试的时候，同事反馈说图片没有展示出来，去看了以后简直莫名奇妙，因为我自认为对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，然而，大哥你虽然可以代替，但是直接破坏原来的效果，是不是有点不厚道呀！