乐趣区

关于前端:关于webpack中的几种资源处理格式

jiezi

在 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 的图片则会被作为独自的文件输入到输入目录。

退出移动版