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

40次阅读

共计 996 个字符,预计需要花费 3 分钟才能阅读完成。

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

正文完
 0