码迷,mamicode.com
首页 > 其他好文 > 详细

解决处理图片路径loader

时间:2019-02-16 15:37:05      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:module   .config   第三方   byte   图片   保留   limit   终端   第三方模块   

终端

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

标签:module   .config   第三方   byte   图片   保留   limit   终端   第三方模块   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!