四、webpack5最新打包资源额方式-assetmoduletype(资源模块类型)

在webpack5中,引入了资源模块类型(Asset Module Type),用以替代raw-loader、url-loader和file-loader。asset/resource用于发送单独文件并导出URL,类似file-loader的功能;asset/inline导出dataURI,类似于url-loader的行为;asset/source则导出源代码,对应raw-loader。最常用的asset模块会根据资源大小自动选择dataURI或单独文件。这种方式简化了webpack的配置,不再需要额外安装和配置loader。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

asset module type

我们当前使用的webpack版本是webpack5: 在webpack5之前,加载这些资源我们需要使用一些loader,比如raw-loader 、url-loader、file-loader;

在webpack5开始,我们可以直接使用资源模块类型(asset module type),来替代上面的这些loader;

资源模块类型(asset module type),通过添加 4 种新的模块类型,来替换所有这些 loader: asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现;
asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现;
asset/source 导出资源的源代码。之前通过使用 raw-loader 实现;
asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader,并且配置资源体积限制实现;

最常用的为asset,下边是示范
在这里插入图片描述
这种方式可以代替file-loader和url-loader.
也不用再下载这两个loader了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值