Webpack Extrakt-Text-webpack-Plugin und CSS-loader minification

Question

ich Problem habe die CSS-Datei ausgegeben durch den Extrakt-Text-webpack-Plugin minimiert

/* 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} 

Im resultierenden styles.css Es gibt 2 Body Tags. Es sieht so aus, als würden innerhalb einer Datei (innerhalb von file1.css und in file2.css) Verkleinerungen durchgeführt, aber nicht, wenn die beiden Dateien kombiniert und in die final styles.css extrahiert werden.

Wie kann die Minification in der final style.css durchgeführt werden? So ist der Ausgang

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

Answer 1

ist, könnten Sie verwenden optimize-css-assets-webpack-plugin, die erstellt wurde, genau dieses Problem zu lösen.

Answer 2

Für die CSS-Minification können Sie den CSS-Loader des Webpacks mit der Option "minimieren" verwenden. Es löste das Problem in meinem Fall:

webpack.config.js 

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