How to minify the css file extract by extract-text-webpack-plugin?

[qidaneix]

I use webpack@2.2.1 and extract-text-webpack-plugin to extract css into a separate .css file. I have read the document but I can find a way to minify the .css file. How to do it?

[michael-ciniawsky]

@qidaneix Set the minimize option in css-loader

+ { loader: 'css-loader', options: { minimize: true } )

or use postcss-loader+ cssnano, csso-loader etc. ExtractTextPlugin has nothing to do with minification, it's just for extraction regardless if contents are minified or not. 😛

[albertogasparin]

@qidaneix @michael-ciniawsky
The downside of css-loader is that the minification is per included file, not global. If you like to have the entire css bundle minified I would suggest you to have a look at OptimizeCssAssetsPlugin.

[armandoborge]

Despite this issue is closed, maybe this code can help other developers looking for the same:

module: {
            rules: [
                {
                    test: /\.css$/,
                    use: ExtractTextPlugin.extract({
                        fallback: 'style-loader',
                        use: [
                            { loader: 'css-loader', options: { minimize: true } }
                        ]
                    })
                }
           ]
}

[chhaymenghong]

@albertogasparin I tried using OptimizeCssAssetsPlugin, but it seems to embed the sourcemap information inside the css bundle itself and as a result increase the bundle size. Any ideas on how to make the sourceMapUrl to point to a map file instead?

[albertogasparin]

@chhaymenghong I'm actually turning css source maps off on production. You already reported it, so let's see what the owner has to say

[X-Y]

For anybody using css-loader 1.0.0, the minimize options is removed and you have to use postcss + cssnano instead.
https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md