1

When it comes to naming the CSS files generated with MiniCssExtractPlugin, There are two different recommendation of how to name them:

First Example:

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

Second Example:

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

Which method is the preferred method and why?

user1941537
  • 6,097
  • 14
  • 52
  • 99

1 Answers1

2

[contenthash] is better over [hash]. Contenthash is a hash generated based on the content of the file, so it is only going to change if you made changes for that file. This helps on cash overall (or even better: "long term caching of static content").

Given that you update one of your files and you are using other things other than contenthash, the user is not going to be able to see any updates (one would need to delete the cash). Contenthash is a better and automatic version of doing:

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

TL;TR: is good for cache, only gets updated if content changed, helps long term cache, etc.

PlayMa256
  • 6,603
  • 2
  • 34
  • 54
  • Thanks. But when webpack offers [chunkhash] and [contenthash], why some people are using webpack-md5-hash plugin? – user1941537 Aug 10 '18 at 13:15
  • 2
    Because they might not be aware of those two things (chunkhash is generated per chunk). That plugin is basically the same as [hash]. – PlayMa256 Aug 10 '18 at 13:17