Webpack estratto-text-webpack-plugin e css-loader minification

Question

Sto avendo problema riducendo al minimo l'output file css dall'estratto-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} 

Nel styles.css risultante , ci sono 2 tag del corpo. Sembra che le minificazioni siano eseguite all'interno di un file (all'interno di file1.css e all'interno di file2.css), ma non quando i due file vengono combinati ed estratti negli styles.css finali.

Come si può eseguire la minificazione sullo style.css finale? Quindi l'uscita è

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

Answer 1

Potreste usare optimize-css-assets-webpack-plugin, che è stato creato per risolvere questo problema esatto.

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

Answer 2

Per la minificazione css è possibile utilizzare il CSS-loader del pacchetto Web con l'opzione "minimizza". Risolve il problema nel mio caso:

webpack.config.js 

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