CODEWITHSUNDEEP
csswebpackmini-css-extract-plugin
user1941537
user1941537

Reputation: 6695

Webpack 4: naming the CSS files

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?

Upvotes: 1

Views: 162

Answers (1)

PlayMa256
PlayMa256

Reputation: 6841

[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.

Upvotes: 2

Related Questions