webpack5 css文件中的图片资源的打包问题处理

203 阅读1分钟

今天在项目开发编译时发现index.less文件中的png图片在预览时失败,项目是基于webapck5。

image.png 引用的图片地址打开后里边的内容是

image.png


export default __webpack_public_path__ + "images/work_903f9e0c3f68981ab0f2031e144dbcb6.png";

基于以上的现象初步怀疑是file-loader或者css-loader导致的。

css-loader中有个url配置可以对资源进行过滤处理

image.png

直接过滤不处理不符合我的场景需要,所以不能做这个配置。

在查找资料时发现webpack5中的图片、字体等的处理可以不通过插件,直接使用Asset Modules,换成asset/resoure后果然解决了我的问题。

image.png

image.png

记录一下解决的思路,希望可以帮到有需要的亲们~