替换符

作用

替换符可在 Webpack 的字符串中使用，webpack 会自动将这些替换符替换为对应的数据

使用规则

只能在插件或是配置中使用。且不同层级的替换符只能在对应的层级上下文中使用。

各个层级【5个】的替换符说明

编译层级的替换符

作用

基于整个Webpack构建过程的元数据生成哈希值

应用场景

所有资源需同步更新的场景。

使用限制

能在输出文件名（如output.filename）或插件中全局使用。

模板说明

模板	描述
[fullhash]	整个编译过程的完整哈希值

块（Chunk）层级的替换符

作用

基于单个代码块（Chunk）的属性生成数据。

应用场景

多入口或代码分割时区分不同块的输出文件.

使用限制

[chunkhash]和[contenthash]仅适用于块层级输出（如output.filename和output.chunkFilename）。

模板说明

模板	描述
[id]	块的唯一 ID
[name]	块的名称（若未设置名称，则使用块的 ID）
[chunkhash]	块的哈希值，包含块内所有元素的哈希（例如代码、依赖等）
[contenthash]	块的哈希值，仅包含该内容类型的元素（受 optimization.realContentHash配置影响）

模块层级的替换符

作用

基于单个模块（Module）的属性生成标识。【也可以叫依赖】

应用场景

模块独立输出（如通过mini-css-extract-plugin提取CSS）。

使用限制

需结合插件使用，无法直接在output.filename中调用。

模板说明

模板	描述
[id]	模块的唯一 ID
[hash]	模块的哈希值
[contenthash]	模块内容的哈希值

文件层级的替换符

路径组合关系：

• [file] = [path][base]
• [base] = [name][ext]

完整路径为 [path][name][ext][query][fragment] 或 [path][base][query][fragment] 或 [file][query][fragment]。

作用

基于文件路径和名称的元数据生成的路径结构数据。

使用限制

[ext] 不可用于 output.filename，但可在资源模块规则中使用。

例如：asset/resource、全局资源路径配置（assetModuleFilename）

应用场景

静态资源分类存储

模板说明

模板	描述
[file]	文件名及路径（不含查询参数 ? 或片段 #）
[query]	查询参数（以 ? 开头）
[fragment]	URL 片段（以 # 开头）
[base]	仅文件名（含扩展名），不含路径
[path]	仅路径，不含文件名
[name]	仅文件名（不含扩展名和路径）
[ext]	扩展名（以 . 开头，不适用于 output.filename）

URL 层级的替换符

作用

处理包含URL参数的资源路径。

应用场景

动态生成CDN链接或带版本控制的资源路径。

使用限制

需结合publicPath配置或插件使用。

模板说明

模板	描述
[url]	完整的 URL

转义占位符：

若需在文件名中将替换符本身作为字符串，不让 webpack 进行替换（如 [name]），需通过反斜杠转义：

示例：[\name] 会生成 [name]，而非替换为实际文件名称。

类似地，[\id] 生成 [id]。

哈希长度控制：

可通过 [hash:16] 指定哈希值的长度（默认为 20），例如：

output: {
  filename: '[name].[chunkhash:8].js',
},

或全局配置 output.hashDigestLength。