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]，因为这会使您的构建变慢。

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

1 个答案: