在webpack5之前，加载图片、字体等资源我们需要使用一些loader，比如file-loader、url-loader、raw-loader等；
在webpack5之后，我们可以直接使用 资源模块类型（asset module type），来替代上面的这些loader。

四种类型

资源模块类型，通过添加4种新的模块类型，来替换所有这些loader：

  • asset/resource：发送一个单独的文件并导出URL。之前使用 file-loader 实现；
  • asset/inline：导出一个资源的data URI。之前通过使用 url-loader 实现；
  • asset/source：导出资源的源代码（直接读取出一个字符串）。之前通过使用 raw-loader 实现；（用得较少）
  • asset：会根据文件大小来选择使用哪种类型，当文件小于8kb（默认）的时候会使用asset/inlline，否则会使用asset/resource。

    asset在导出一个data URI 和 发送一个单独的文件之间自动选择。之前通过使用url-loader中的limit属性来配置资源体积限制实现。

asset module type的使用

1.asset/resource的使用

实现得是跟之前file-loader一样的效果。
image.png

注意！！！写[ext]的时候不要加“.”，默认ext中是含有“.”的 推荐方式二！！！

2.asset/inline 的使用

实现得是跟之前url-loader一样的效果。
image.png
上面两种情况下，无论图片文件大小，要不图片全部被打包发送到对应的打包文件夹下；要不图片全部被转成data URI嵌入到bundle.js中。
Q：那我们如何针对图片大小做不同的图片操作呢？（小图片转成data URI，大图片直接发送图片到文件夹下）
看下面的asset的使用。

3.asset 的使用

image.png