I am having problem minimizing the css file output by the extract-text-webpack-plugin
/* webpack.config.js */ ... loader: [{test: /\.css$/, loader: ExtractTextPlugin.extract('css?minimize')}] ... plugins: [new ExtractTextPlugin("styles.css")] ... /* test.js */ require('./file1.css')
/* file1.css */ @import './file2.css'; body {color: green;} body {font-size: 1rem;} /* file2.css */ body {border: 1px solid;} body {background: purple;} /* the output styles.css */ body{color:green;font-size:1rem}body{border:1px solid;background:purple}
In the resulting styles.css, there are 2 body tags. It seems that minifications are performed within a file (within file1.css and within file2.css) but not when the two files are combined and extracted into the final styles.css.
How can minification be performed on the final style.css? So the output is
body{color:green;font-size:1rem;border:1px solid;background:purple}
This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps. It builds on top of a new webpack v5 feature and requires webpack 5 to work.
To minify the resulting CSS, you'll use the optimize-css-assets-webpack-plugin: In Glitch console, run npm install --save-dev optimize-css-assets-webpack-plugin . Run refresh , so the changes are synchronized with the Glitch editor.
mini-css-extract-plugin It generates a CSS file for each JS file that imports CSS. It's more useful for CSS that you want to load asynchronously.
Loaders work at the individual file level during or before the bundle is generated. Plugins: Plugins work at bundle or chunk level and usually work at the end of the bundle generation process. Plugins can also modify how the bundles themselves are created.
You could use optimize-css-assets-webpack-plugin, which was created to solve this exact issue.
plugins: [ new ExtractTextPlugin("styles.css"), new OptimizeCssAssetsPlugin() ]
For css minification you may use the webpack's CSS-loader with the "minimize" option. It solved the problem in my case:
webpack.config.js ... module: { rules: [ { test: /\.css$/, use: [{ loader: "css-loader", options: { minimize: true } } }, ] }, ...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With