webpack打包css中背景图路径报错问题
问题描述:明明打包成功,但是部署到后台时,却发现背景图丢失了
这是背景图的路径
这是链接地址路径
这是webpack打包后的图片存储路径
通过查找原因,我们可以在浏览器运行的HTML代码中发现,背景图的路径不正确,因此我们需要在webpack重新设置你的css-loader路径,只需要添加publicPath 公共路径即可。
limit,代表如果小于大约4k则会自动帮你压缩成base64编码的图片,否则拷贝文件到生产目录
name,后面是打包后的路径;
loader,后面 limit 字段代表图片打包限制,这个限制并不是说超过了就不能打包,而是指当图片大小小于限制时会自动转成 base64 码引用
最终得到结果,背景图正常显示。
总结:出现这个问题的根本原因是limit限制问题,超过限制大小的图片就会存放到一个公用文件中,我们只要配置好这个公用文件的路径就可以了。没有超出限制的图片会转义成base64的代码,所以不会出问题。