webpack 打包 设置小图片自动转换base64图

1.<img src='./logo.jpg'>
执行过程：浏览器发起请求获取标签----》随后再次发起请求获取图片的位置---》渲染到页面
2..<img src = 'data:image/jpg;base64,/9j/4a'>
这个执行过程:浏览器发起请求可以直接获取到图片的地址，并渲染到页面

总结： base64的格式，优点：要访问效率要高一些
                               缺点：转换为base64格式图片会变大（小图片适合这种方式）

  // 下面操作就是设置小图自动转换base64格式的的方法
index.js 文件
import logo from  './img/logo.jpg

//利用DOM语句给src赋值
$('.box').attr('src',logo)

 module:{
      rules:[
           //如果需要调用loader只有一个，则只传递一个字符串也行，如果有多个loader，则必须指定数组
           // 配置url-loader 的时候，多个参数之间，使用&符号进行分隔
           //这里的 outputPath=images 指定的目录会在webpack-dev-server会在哪个指定的目录，
           //默认是dist目录里生成一个images
           {test:/\.jpg|png|gif$/,use:'url-loader?limit=470&outputPath=images'},]}
          //limit=470;意思是limit的图片小于或等于470的图片会转换为base64的格式