webpack5不要再用url-loader了
共 2506字，需浏览 6分钟
·
2021-05-26 21:50
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: {rules: [{test: /\.(png|jpg|gif)$/i,use: [{loader: 'url-loader',options: {limit: 8192,},},],},],},};
webpack5 代码
= {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: {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/resource 2、asset/inline 3、asset/source 4、asset 。