diff --git a/README.md b/README.md index 4768a518..a58c46fc 100644 --- a/README.md +++ b/README.md @@ -616,20 +616,15 @@ module.exports = { ### Minimizing For Production -To minify the output, use a plugin like [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin). -Setting `optimization.minimizer` overrides the defaults provided by webpack, so make sure to also specify a JS minimizer: +To minify the output, use a plugin like [css-minimizer-webpack-plugin](https://github.com/webpack-contrib/css-minimizer-webpack-plugin). **webpack.config.js** ```js -const TerserJSPlugin = require('terser-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); +const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); module.exports = { - optimization: { - minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})], - }, plugins: [ new MiniCssExtractPlugin({ filename: '[name].css', @@ -644,9 +639,18 @@ module.exports = { }, ], }, + optimization: { + minimizer: [ + // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line + // `...` + new CssMinimizerPlugin(), + ], + }, }; ``` +This will enable CSS optimization only in production mode. If you want to run it also in development set the `optimization.minimize` option to true. + ### Using preloaded or inlined CSS The runtime code detects already added CSS via `` or `