Skip to content

Commit f9ad5c2

Browse files
Fix #24 - Add information about minimization
Add a note and example about minimizing CSS output in Webpack 4.
1 parent e062cd2 commit f9ad5c2

File tree

1 file changed

+30
-0
lines changed

1 file changed

+30
-0
lines changed

README.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,36 @@ module.exports = {
6666
}
6767
```
6868

69+
### Minimizing For Production
70+
71+
While Webpack 5 is likely to come with a CSS minimizer built-in, with Webpack 4 you need to bring your own. To minify your the output, use a plugin like optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin):
72+
73+
```js
74+
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
75+
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
76+
module.exports = {
77+
plugins: [
78+
new MiniCssExtractPlugin({
79+
filename: "[name].css",
80+
chunkFilename: "[id].css"
81+
}),
82+
new OptimizeCssAssetsPlugin()
83+
],
84+
module: {
85+
rules: [
86+
{
87+
test: /\.css$/,
88+
use: [
89+
MiniCssExtractPlugin.loader,
90+
"css-loader"
91+
]
92+
}
93+
]
94+
}
95+
}
96+
```
97+
98+
6999
<h2 align="center">Maintainers</h2>
70100

71101
<table>

0 commit comments

Comments
 (0)