解决处理图片路径loader

Posted 2021-02-09 wuaidongfang

终端

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] 指图片打包前后的后缀名相同