Add hash to stylesheet extraction docs (#1784)

* Add hash to stylesheet extraction docs * Add contenthash to Webpack example
atlassian-labs · Jan 21, 2025 · 0564e04 · 0564e04
1 parent 5da86c5
commit 0564e04
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/examples/webpack/webpack.config.js b/examples/webpack/webpack.config.js
@@ -65,7 +65,7 @@ module.exports = {
   plugins: [
     ...(extractCSS
       ? [
-          new MiniCssExtractPlugin({ filename: '[name].css' }),
+          new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }),
           new CompiledExtractPlugin({ sortShorthand: true }),
         ]
       : []),

diff --git a/website/packages/docs/src/pages/css-extraction-webpack.mdx b/website/packages/docs/src/pages/css-extraction-webpack.mdx
@@ -173,7 +173,7 @@ module.exports = {
 		],
 	},
 	plugins: [
-+		new MiniCssExtractPlugin(),
++		new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }),
 		new CompiledExtractPlugin(),
 	],
 };
@@ -227,16 +227,17 @@ All extracted styles will be placed in a file called `compiled-css.css`.
 
 #### Filename
 
-Pass the `filename` option to the extract plugin,
-we recommend using `[contenthash]` in the name.
+Some production environments may require you to include a hash in the filename to allow the stylesheet to be cached correctly.
+
+To do this, pass the `filename` option to the extract plugin, including `[contenthash]` in the name.
 
 ```diff
 // webpack.config.js
 -new MiniCssExtractPlugin()
-+new MiniCssExtractPlugin({ filename: '[contenthash].[name].css' })
++new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' })
 ```
 
-See [`mini-css-extract-plugin` docs](https://github.com/webpack-contrib/mini-css-extract-plugin/#long-term-caching) for more information on these options.
+See the [`mini-css-extract-plugin` docs](https://github.com/webpack-contrib/mini-css-extract-plugin/#long-term-caching) for more information on the available options.
 
 ### CSS minification