webpack5不要再用url-loader了

webpack 最出色的功能之一就是，除了引入 JavaScript，還可以通過 loader 或內(nèi)置的 Asset Modules 引入任何其他類型的文件。

webpack5 新增 Asset Modules 資源模塊。

資源模塊(asset module)是一種模塊類型，它允許使用資源文件（字體，圖標(biāo)等）而無需配置額外 loader。

在 webpack 5 之前，通常使用：

1、raw-loader 將文件導(dǎo)入為字符串。

2、url-loader 將文件作為 data URI 內(nèi)聯(lián)到 bundle 中。

3、file-loader 將文件發(fā)送到輸出目錄。

資源模塊類型(asset module type)，通過添加 4 種新的模塊類型，來替換所有這些 loader：

1、asset/resource 發(fā)送一個單獨的文件并導(dǎo)出 URL。之前通過使用 file-loader 實現(xiàn)。

2、asset/inline 導(dǎo)出一個資源的 data URI。之前通過使用 url-loader 實現(xiàn)。

3、asset/source 導(dǎo)出資源的源代碼。之前通過使用 raw-loader 實現(xiàn)。

4、asset 在導(dǎo)出一個 data URI 和發(fā)送一個單獨的文件之間自動選擇。之前通過使用 url-loader，并且配置資源體積限制實現(xiàn)。

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 對應(yīng)的 github 倉庫地址，會看到這樣一句話：DEPREACTED for v5: please consider migrating to asset modules. 也就說 v5 版本已經(jīng)廢棄，改成使用資源模塊(asset module)了。

當(dāng)在 webpack 5 中使用舊的 assets loader（如 file-loader/url-loader/raw-loader 等）和 asset 模塊時，這可能會導(dǎo)致 asset 重復(fù)，所以你可能想阻止 webpack 5 內(nèi)置的 asset 模塊的處理，你可以通過將 asset 模塊的類型設(shè)置為 'javascript/auto' 來解決。

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

總結(jié)：不建議大家再使用舊的 assets loader 如 file-loader/url-loader/raw-loader 。webpack5 已經(jīng)支持資源模塊，通過 type 參數(shù)進(jìn)行配置，可選的參數(shù)有：1、asset/resource 2、asset/inline 3、asset/source 4、asset 。