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

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

Webpack config output filename using square brackets params instead of a plain text

filenames

build

webpack

webpack-dev-server

webpack-2