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的格式