css - Webpack 4：命名 CSS 文件

Question

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

第一个例子：

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

第二个例子：

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

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

Answer 1

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

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

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

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