webpack5不要再用url-loader了

JavaScript 专栏收录该内容
104 篇文章 0 订阅

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 。

  • 3
    点赞
  • 7
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页

打赏

前端精髓

小礼物走一走,来CSDN关注我

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值