Webpack 配置输出文件名使用方括号参数而不是纯文本答案

【问题标题】：Webpack config output filename using square brackets params instead of a plain textWebpack 配置输出文件名使用方括号参数而不是纯文本
【发布时间】：2026-02-09 20:10:01
【问题描述】：

在webpack.config.js 和output.filename 中，我看到了方括号。那是什么意思？使用它和纯文本有什么区别？

output: {
    filename: '[name].js',

    // Webpack dev middleware, if enabled, handles requests for this URL prefix
    publicPath: 'dist/'
},

【问题讨论】：

标签： webpack build filenames webpack-dev-server webpack-2

【解决方案1】：

这些是 Webpack 将用其实际值替换的占位符。

您可以在官方文档中了解更多信息：https://webpack.js.org/configuration/output/#output-filename。

这些是可用的选项：

[hash]：模块标识符的哈希值。

[chunkhash]：块内容的哈希值。

[name]：模块名称。

[id]：模块标识符。

[query]：模块查询，即后面的字符串？在文件名中。

例如，如果您的 Webpack 配置如下所示：

{
    entry : {
        a: '...',
        b: '...',
        c: '...'
    },


    output: {
        filename: '[name].js',
        publicPath: 'dist/'
    }
}

Webpack 将生成 3 个输出文件，entry 中的每个键对应一个：a.js、b.js 和 c.js。

[hash] 和[chunkhash] 的区别在于前者是按构建生成的，而后者是按输出文件生成的。

这有很多好处，就像您使用哈希作为缓存破坏器一样，也许您生成了一个新版本，其中只有一个文件发生了变化，但您仍然会强制您的用户重新下载所有文件。如果您使用[chunkhash]，则只会重新下载已更改的文件。

另外，请记住不要在开发模式下使用[chunkhash]，因为这会使您的构建速度变慢。

【讨论】：

感谢您的快速回复。在输出的上下文中，名称是如何在运行时确定的？
@kumar [name] 占位符将在编译时被 entry 内的每个 key 替换。在这种情况下，每次触发构建时[name] 将被替换为a、b 和c 的3 个值。