webpack5不要再用url-loader了

Posted 2021-06-01 前端精髓

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 。