url-loader

• 在使用url-loader對(duì)圖片進(jìn)行加載處理的時(shí)候, 可以通過(guò)設(shè)置options來(lái)設(shè)置圖片打包的處理結(jié)果
• limit可以用來(lái)設(shè)置對(duì)圖片進(jìn)行base64編碼的限制
  • 默認(rèn)情況下，對(duì)任何大小的圖片都進(jìn)行base64編碼,不單獨(dú)打包成一個(gè)文件
  • 可以設(shè)置以下

方法1 設(shè)置布爾值，
設(shè)置為true對(duì)所有大小的圖片都編碼，
設(shè)置為false默認(rèn)對(duì)所有大小的圖片都不進(jìn)行編碼

module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: false, ////設(shè)置為false對(duì)任何圖片都不進(jìn)行base64編碼
            },
          },
        ],
      },
    ],
}

image.png

方法二： 設(shè)置數(shù)值
小于該數(shù)值的圖片進(jìn)行base64編碼；大于等與該數(shù)值的圖片不進(jìn)行base64編碼

module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 0, //設(shè)置為0對(duì)任何圖片都不進(jìn)行base64編碼
            },
          },
        ],
      },
    ],
}

方法二： 設(shè)置字符串，利用查詢字符串的形式 配置loader
limit給定的值是圖片的大小，單位是byte字節(jié)，如果我們引用的圖片大于或等于給定的limite值，則不會(huì)被轉(zhuǎn)為base64格式的字符串。如果圖片小于給定的limit值，則會(huì)被轉(zhuǎn)換為base64的字符串（limit目的：讓大圖保真，讓小圖壓縮）;

[name]代表名稱,name能夠設(shè)置圖片的名稱跟原來(lái)一樣，
[ext]代表擴(kuò)展名,這里當(dāng)然也可以手動(dòng)該你想要圖片的名稱例如name=hhh.png

當(dāng)然為了避免命名的重復(fù)，可以在圖片名稱前加一個(gè)8位的hash值，注，每一張圖片的hash值都不一樣hash值是32位的值，只要你指定了一個(gè)數(shù)值，就代表從32位里面截取指定前幾位數(shù)量的值，這里截取的前8位

{ 
    test: /\.(jpg|png|gif|jpeg)$/, 
    use: ['url-loader?limit=11613&name=[hash:8]-[name].[ext]']
},