WebPACK wyciąg-text-WebPack-plugin i CSS-ładowarka minifikacji

Question

mam problemu minimalizacji wyjście plik CSS przez-text-WebPACK-plugin ekstraktu

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

W wyświetlonym styles.css , istnieją 2 znaczniki ciała. Wygląda na to, że minifikacje są wykonywane w pliku (wewnątrz pliku1.css i wewnątrz pliku2.css), ale nie wtedy, gdy oba pliki są połączone i wyodrębnione do ostatecznego pliku styles.css.

W jaki sposób można zminimalizować końcowy plik style.css? Więc wyjście jest

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

Answer 1

Można użyć optimize-css-assets-webpack-plugin, który został stworzony, aby rozwiązać ten problem dokładnie.

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

Answer 2

Aby zmapować css, możesz użyć CSS-loader z pakietu Webpack z opcją "minimalizuj". Rozwiązał problem w moim przypadku:

webpack.config.js 

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