webpack配置之---output.chunkFilename

output.chunkFilename

output.chunkFilename 是 Webpack 中用来配置 异步代码块（动态导入、懒加载等）文件名的选项。它控制的是通过代码拆分生成的那些非入口点（entry）文件的命名规则。

在 Webpack 构建过程中，除了打包主入口文件（entry 配置的文件），当你使用懒加载（import()）或动态导入时，Webpack 会将这些异步加载的代码拆分成独立的文件。这些文件的命名就是由 output.chunkFilename 来控制的。

1. 基本用法

output: {
  filename: 'main.js',        // 主文件
  chunkFilename: 'chunks/[name].[contenthash].js' // 异步文件
}

2. 配置说明

• chunkFilename: 用来指定异步加载的代码块的文件名。
  • 通过 chunkFilename 配置，你可以设置代码分块的文件命名规则。
  • 文件名可以包含占位符，像是 [name]、[id]、[contenthash] 等。

3. 常见占位符

chunkFilename 支持以下占位符，用来生成不同的文件名格式：

• [name]: 代码块的名称，通常是根据入口或代码拆分的名称来生成。
• [id]: 代码块的唯一 ID（数字）。
• [contenthash]: 基于内容生成的哈希值，通常用于缓存优化。
• [chunkhash]: 基于代码块内容生成的哈希值，用于缓存优化。

4. 示例配置

示例 1：基本命名

output: {
  filename: 'main.js',
  chunkFilename: 'async/[name].js'  // 异步代码块放入 async 文件夹中，使用名称作为文件名
}

示例 2：使用 contenthash 生成哈希值

output: {
  filename: 'main.js',
  chunkFilename: 'async/[name].[contenthash].js' // 文件名中包含内容哈希，适用于缓存优化
}

示例 3：使用 chunkhash

output: {
  filename: 'main.js',
  chunkFilename: 'async/[name].[chunkhash].js'  // 每个异步文件根据其内容生成哈希值
}

5. 占位符详细说明

• [name]: 如果是通过动态 import() 创建的代码块，[name] 会使用你指定的名称。如果没有明确命名，Webpack 会根据模块文件名生成。
• [id]: Webpack 会为每个生成的代码块分配一个数字 ID。这个占位符可以用来确保文件名唯一。
• [contenthash]: 在每次构建时，Webpack 会计算文件内容的哈希值，并将它作为文件名的一部分。这样可以帮助浏览器缓存资源，并在内容变更时生成新的文件名。
• [chunkhash]: 与 [contenthash] 类似，[chunkhash] 是根据整个代码块内容生成的哈希值，通常用于优化缓存和版本控制。

6. 文件输出结果

假设你使用如下配置：

output: {
  filename: 'js/[name].bundle.js',
  chunkFilename: 'js/chunks/[name].[contenthash].js'
}

Webpack 会根据你的入口和动态导入创建如下文件结构：

• main.bundle.js：主入口文件。
• js/chunks/asyncChunk.1234567890abcdef.js：异步代码块，文件名包含根据内容生成的哈希值。

7. 总结

• output.chunkFilename 控制异步代码块的文件名。
• 可以通过占位符定制命名规则，如 [name]、[id]、[contenthash]、[chunkhash] 等。
• 推荐使用 [contenthash] 或 [chunkhash] 来实现缓存优化，使得文件在内容不变时不会被重新加载。