diff --git a/README.md b/README.md index ab81923c..cdf3f456 100644 --- a/README.md +++ b/README.md @@ -66,6 +66,47 @@ module.exports = { } ``` +### Minimizing For Production + +While webpack 5 is likely to come with a CSS minimizer built-in, with webpack 4 you need to bring your own. 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: + +**webpack.config.js** + +```js +const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); +module.exports = { + optimization: { + minimizer: [ + new UglifyJsPlugin({ + cache: true, + parallel: true, + sourceMap: true // set to true if you want JS source maps + }), + new OptimizeCSSAssetsPlugin({}) + ] + }, + plugins: [ + new MiniCssExtractPlugin({ + filename: "[name].css", + chunkFilename: "[id].css" + }) + ], + module: { + rules: [ + { + test: /\.css$/, + use: [ + MiniCssExtractPlugin.loader, + "css-loader" + ] + } + ] + } +} +``` + ### Features #### Using preloaded or inlined CSS