Webpack extract-text-webpack-plugin and css-loader minification

webpack css-loader
Green picture Green · Dec 6, 2015 · Viewed 9.8k times · Source

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}

Answer

Alexandre Kirszenberg picture Alexandre Kirszenberg · Jan 12, 2016

You could use optimize-css-assets-webpack-plugin, which was created to solve this exact issue.

plugins: [
    new ExtractTextPlugin("styles.css"),
    new OptimizeCssAssetsPlugin()
]

Related questions

Import CSS from "node_modules" in Webpack

Some third-party modules I'm using have their own CSS files. I'd like to include them in my app's one, single CSS file, which is processed by Webpack. How can CSS files under "node_modules" be imported into my CSS file? …

Read More
Webpack - background images not loading

I'm fairly new to webpack but having some problems with css-loader or file-loader. I'm trying to load a background-image but it doesn't work quite right. The background-image isn't shown, even though the devtools show the background-image style. If I copy …

Read More
“You may need an appropriate loader to handle this file type” with Webpack and CSS

I an new to webpack, and I have been able to get it to packup my javascript, but the CSS eludes me. I keep getting a: “You may need an appropriate loader to handle this file type” One the first …

Read More