首页 > 其他 > 详细

解决处理图片路径loader

时间:2019-02-16 15:38:24      阅读:359      评论:0      收藏:0      [点我收藏+]

终端

cnpm i url-loader -D  //安装url-loader解决url报错
cnpm i file-loader -D   //内部依赖,不用在配置文件中配置

webpack.config.js

module:{//这个节点,用于配置所有第三方模块加载器
    rules:[//所有第三方模块的匹配规则
      
      { test:/\.(jpg|png|gif|bmp|jpeg)$/,use:‘url-loader‘}, //配置处理图片路径loader

    ]
  }

 

{ test:/\.(jpg|png|gif|bmp|jpeg)$/,use:‘url-loader?limit=13150‘},
//limit 给定的值是图片的大小(字节byte),如果引用图片大于或等于给定的limit值(我这里是13150),则不会被转为base64格式的字符串,如果图片大小给定的limit值,则会被转为base64的字符串

 

{ test:/\.(jpg|png|gif|bmp|jpeg)$/,use:‘url-loader?limit=13150&name=[hash:8]-[name].[ext]‘},
//limit 给定的值是图片的大小(字节byte),如果引用图片大于或等于给定的limit值(我这里是13150),则不会被转为base64格式的字符串,如果图片大小给定的limit值,则会被转为base64的字符串
//
name=[hash:8]-[name] 指打包后图片的的名字还是跟以前一样(保留前8位的hash值)
// .[ext] 指图片打包前后的后缀名相同

 

解决处理图片路径loader

原文:https://www.cnblogs.com/wuaidongfang/p/10387766.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!