今天在项目开发编译时发现index.less文件中的png图片在预览时失败,项目是基于webapck5。
引用的图片地址打开后里边的内容是
export default __webpack_public_path__ + "images/work_903f9e0c3f68981ab0f2031e144dbcb6.png";
基于以上的现象初步怀疑是file-loader或者css-loader导致的。
css-loader中有个url配置可以对资源进行过滤处理
直接过滤不处理不符合我的场景需要,所以不能做这个配置。
在查找资料时发现webpack5中的图片、字体等的处理可以不通过插件,直接使用Asset Modules,换成asset/resoure后果然解决了我的问题。
记录一下解决的思路,希望可以帮到有需要的亲们~