weback中loader的使用-图片文件

1.在终端执行

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

2.配置webpack.config.js

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

　　　　}, //配置处理图片路径loader    ]  }

3，说明

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