在Webpack 5中,提供了一个统一的资源处理机制,通过 asset 模块类型,能够轻松地处理各种资源,比如图片、字体、音视频等等。

其中,asset 模块类型提供了四种模式:

  1. asset/resource:将资源作为单独的文件输出到输出目录,并返回 public URL。
  2. asset/inline:将资源作为 data URI 内联到 bundle 中。
  3. asset/source:将资源作为源代码字符串导出,并返回其 URL。
  4. asset:根据资源文件大小自动选择 asset/resource 或 asset/inline。

下面分别介绍一下这四种模式的特点和使用方法:
1. asset/resource
asset/resource 模式会将资源作为单独的文件输出到输出目录,并返回该资源的 URL。它的使用方式是:

{
  test: /\.(png|jpg|gif)$/i,
  type: 'asset/resource',
}

2. asset/inline

asset/inline 模式会将资源作为 data URI 内联到 bundle 中。这种方式适用于小文件,比如图标。它的使用方式是:

{
  test: /\.(png|jpg|gif)$/i,
  type: 'asset/inline',
}
  1. asset/source

asset/source 模式会将资源作为源代码字符串导出,并返回该资源的 URL。这种方式适用于需要进一步处理资源的情况,比如对 SVG 图标进行优化。它的使用方式是:

{
  test: /\.(svg)$/i,
  type: 'asset/source',
}
  1. asset

asset 模式会根据资源文件的大小自动选择 asset/resource 或 asset/inline 模式。当资源文件的大小小于指定的阈值时,使用 asset/inline 模式,否则使用 asset/resource 模式。它的使用方式是:

{
  test: /\.(png|jpg|gif)$/i,
  type: 'asset',
  parser: {
    dataUrlCondition: {
      maxSize: 8 * 1024, // 小于8KB的图片会被转成base64编码
    },
  },
}

需要注意的是,当使用 asset 模式时,可以通过 parser 选项来配置资源的处理方式。上面的例子中,通过 dataUrlCondition 配置,将小于 8KB 的图片转成 base64 编码内联到 bundle 中,而大于 8KB 的图片则会被作为单独的文件输出到输出目录。


梨花
11 声望0 粉丝