minicssextractplugin - Webpack extract-text-webpack-plugin y css-loader minification

mini-css-extract-plugin

Question

Tengo problemas para minimizar el resultado del archivo css mediante el complemento-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}

En el styles.css resultante, hay 2 etiquetas de cuerpo. Parece que las minificaciones se realizan dentro de un archivo (dentro de file1.css y dentro de file2.css) pero no cuando los dos archivos se combinan y extraen en el styles.css final.

¿Cómo se puede realizar la minificación en el estilo final.css? Entonces la salida es

body{color:green;font-size:1rem;border:1px solid;background:purple}

Answer 1

Para la minificación de CSS, puede usar el cargador de CSS de la Webpack con la opción "minimizar". Solucionó el problema en mi caso:

webpack.config.js
...
module: {
rules: [
{
test: //.css$/,
use: [{
loader: "css-loader",
options: {
minimize: true
}
}
},
]
},
...

Answer 2

Puede usar optimize-css-assets-webpack-plugin , que fue creado para resolver este problema exacto.

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