webpack配置项之---output.assetModuleFilename

output.assetModuleFilename

output.assetModuleFilename 是 Webpack 5 中新增的配置项，用于指定输出资源（如图像、字体、音频等文件）在构建过程中生成的文件名。该配置项适用于 Webpack 内置的 Asset Modules 机制（即处理静态资源文件的模块）。Asset Modules 替代了以前的 file-loader 和 url-loader，用于更加灵活和高效地处理静态资源。

1. 功能概述

output.assetModuleFilename 用于定义通过 Webpack 内置的 asset 模块生成的静态资源文件的输出路径和文件名。可以设置文件路径、文件名模式以及动态生成的哈希值等。

2. 配置格式

assetModuleFilename 支持字符串或占位符的形式，可以通过占位符来动态生成文件名和路径。

占位符

• [name]：模块的名称。
• [hash]：文件内容的哈希值。
• [contenthash]：文件内容的哈希值（比 [hash] 更精确）。
• [ext]：文件的扩展名（如 .jpg、.woff 等）。
• [query]：文件的查询字符串（如果有）。

示例格式：

'[path][name][ext]?[hash]'

3. 配置选项

在 Webpack 配置文件中的 output 部分，assetModuleFilename 的使用方法如下：

module.exports = {
  output: {
    // 输出目录
    path: path.resolve(__dirname, 'dist'),
    
    // 配置静态资源文件的输出路径和文件名
    assetModuleFilename: 'assets/[name].[contenthash][ext]',
  },

  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|woff|woff2|svg)$/,
        type: 'asset',  // 使用 Asset Modules
      },
    ],
  },
};

解释：

• assetModuleFilename: 'assets/[name].[contenthash][ext]' :
  • 这个配置将静态资源文件（如图像、字体文件等）输出到 dist/assets/ 目录下。
  • 文件名将由资源的 名称 和 内容的哈希值 组成，并以 原扩展名 （如 .jpg、.woff 等）结尾。

生成结果：

假设我们有一个 image.png 文件，并且它的内容哈希值为 abc123，则它将被输出为：

dist/assets/image.abc123.png

4. 配置 output.assetModuleFilename 的作用

output.assetModuleFilename 主要影响以下几种资源的处理：

• 图像 （如 .jpg, .png, .gif）
• 字体 （如 .woff, .woff2, .eot, .ttf）
• 音频和视频 （如 .mp3, .mp4, .webm）
• 其他资源 （如 .svg, .json）

5. 与 type: 'asset' 的结合

在 Webpack 5 中，asset 模块机制允许通过 type: 'asset' 处理这些静态资源。这种方式自动决定是将资源转为 Data URL （内联资源），还是作为文件输出（通常当文件大于一定大小时）。assetModuleFilename 配置项用于控制这些静态资源的文件名。

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|woff|woff2)$/,
        type: 'asset',  // 使用 Webpack 的 Asset 模块
      },
    ],
  },
  output: {
    assetModuleFilename: 'static/[name][ext]?[contenthash]',
  },
};

生成结果：

• 对于文件 image.png，如果该资源较大，Webpack 会将其提取到 dist/static/image.png?abc123 路径。
• 如果文件较小，则可能会将它转为 Data URL（例如，内嵌到 JavaScript 文件中）。

总结

• output.assetModuleFilename 用于控制 Webpack 内置 Asset Modules （包括 asset/resource、asset/inline 和 asset 类型）生成静态资源的文件名和路径。
• 支持使用占位符（如 [name]、[hash]、[ext]、[contenthash]）来动态生成文件名。
• 与 type: 'asset' 和 type: 'asset/resource' 一起使用时，可以自定义输出资源的路径和文件名。
• 可以通过合理设置该配置来优化资源文件的缓存策略和目录结构。