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]: The hash of the module identifier.
• [chunkhash]: The hash of the chunk content.
• [name]: The module name.
• [id]: The module identifier.
• [query]: The module query, i.e., the string following ? in the filename.

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

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


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

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

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

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

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