Webpack extract-text-webpack-plugin и css-loader minification

У меня проблема с минимизацией вывода файла css с помощью файла extract-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}

В результирующих styles.css есть 2 тега тела. Кажется, что миниатюры выполняются в файле (в файле file1.css и в файле file2.css), но не тогда, когда два файла объединены и извлечены в final styles.css.

Как можно выполнить миниатюру по окончательному style.css? Таким образом, выход

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

Ответы

Ответ 1

Вы можете использовать optimize-css-assets-webpack-plugin, который был создан для решения этой точной проблемы.

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

Ответ 2

Для css minification вы можете использовать CSS-загрузчик webpack с опцией "Свернуть". Он решил проблему в моем случае:

webpack.config.js

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