Webpack extract-text-webpack-plugin和css-loader缩小

Question

我有问题,最小化extract-text-webpack-plugin输出的css文件

/* 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个body标签.似乎缩小是在文件中执行的(在file1.css和file2.css中),但是当两个文件组合并提取到最终的styles.css中时不会.

如何在最终的style.css上进行缩小？所以输出是

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

Answer 1

您可以使用optimize-css-assets-webpack-plugin,它是为解决这个问题而创建的.

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