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

Question

在webpack.config.js，在output.filename我看到方括号。这意味着什么？使用它和纯文本有什么区别？

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

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

Answer 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]在开发模式下使用，因为这会使您的构建速度变慢。