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()
]