webpack5不要再用url-loader了

webpack 最出色的功能之一就是，除了引入 JavaScript，還可以通過 loader 或內建的 Asset Modules 引入任何其他型別的檔案。

webpack5 新增 Asset Modules 資源模組。

資源模組(asset module)是一種模組型別，它允許使用資原始檔（字型，圖示等）而無需設定額外 loader。

在 webpack 5 之前，通常使用：

1、raw-loader 將檔案匯入為字串。

2、url-loader 將檔案作為 data URI 內聯到 bundle 中。

3、file-loader 將檔案傳送到輸出目錄。

資源模組型別(asset module type)，通過新增 4 種新的模組型別，來替換所有這些 loader：

1、asset/resource 傳送一個單獨的檔案並匯出 URL。之前通過使用 file-loader 實現。

2、asset/inline 匯出一個資源的 data URI。之前通過使用 url-loader 實現。

3、asset/source 匯出資源的原始碼。之前通過使用 raw-loader 實現。

4、asset 在匯出一個 data URI 和傳送一個單獨的檔案之間自動選擇。之前通過使用 url-loader，並且設定資源體積限制實現。

webpack4 程式碼

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

webpack5 程式碼

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        type: 'asset',
        parser: {
          dataurlCondition: {
            maxSize: 8192
          }
        }
      },
    ],
  },
};

webpack4 程式碼

module.exports = {
  module: {
    rules: [
      {
        test: /\.png$/i,
        use: 'file-loader'
      },
      {
        test: /\.ico$/i,
        use: 'url-loader'
      },
      {
        test: /\.text$/i,
        use: 'raw-loader'
      },
    ],
  },
};

webpack5 程式碼

module.exports = {
  module: {
    rules: [
      {
        test: /\.png$/i,
        use: 'asset/resource'
      },
      {
        test: /\.ico$/i,
        use: 'asset/inline'
      },
      {
        test: /\.text$/i,
        use: 'asset/source'
      },
    ],
  },
};

所以我們以後不要再使用這三個 loader 了，1、raw-loader 2、url-loader 3、file-loader 。並且開啟 loader 對應的 github 倉庫地址，會看到這樣一句話：DEPREACTED for v5: please consider migrating to asset modules. 也就說 v5 版本已經廢棄，改成使用資源模組(asset module)了。

當在 webpack 5 中使用舊的 assets loader（如 file-loader/url-loader/raw-loader 等）和 asset 模組時，這可能會導致 asset 重複，所以你可能想阻止 webpack 5 內建的 asset 模組的處理，你可以通過將 asset 模組的型別設定為 ‘javascript/auto’ 來解決。

module.exports = {
  module: {
   rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            }
          },
        ],
       type: 'javascript/auto'
      },
   ]
  },
}

總結：不建議大家再使用舊的 assets loader 如 file-loader/url-loader/raw-loader 。webpack5 已經支援資源模組，通過 type 引數進行設定，可選的引數有：1、asset/resource2、asset/inline 3、asset/source 4、asset 。