Webpack 4：命名 CSS 文件答案

【问题标题】：Webpack 4: naming the CSS filesWebpack 4：命名 CSS 文件
【发布时间】：2018-08-10 20:42:56
【问题描述】：

在命名使用 MiniCssExtractPlugin 生成的 CSS 文件时，有两种不同的命名建议：

第一个例子：

plugins: [
    new MiniCssExtractPlugin({
     filename: '[name].css',
     chunkFilename: '[id].css',
    }),
],

第二个例子：

plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contentHash].css',
    }),
  ],

哪种方法是首选方法，为什么？

【问题讨论】：

【解决方案1】：

[contenthash] 优于 [hash]。 Contenthash 是基于文件内容生成的哈希，因此只有在您对该文件进行更改时才会更改。这有助于整体上的现金（甚至更好：“静态内容的长期缓存”）。

鉴于您更新了其中一个文件并且您正在使用除 contenthash 之外的其他东西，用户将无法看到任何更新（需要删除现金）。 Contenthash 是一种更好的自动操作版本：

app.js?build=1
vendor.css?build=1
main.css?build=1

TL;TR：有利于缓存，仅在内容更改时更新，有助于长期缓存等。

【讨论】：

谢谢。但是当 webpack 提供了 [chunkhash] 和 [contenthash] 的时候，为什么有些人在使用 webpack-md5-hash 插件呢？
因为他们可能不知道这两件事（chunkhash 是按块生成的）。该插件与[hash]基本相同。