webpack2 css打包沒有壓縮

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');

var currentTarget = process.env.npm_lifecycle_event;
var PATHS = {
 publicPath : '/'
}
module.exports = {
//devtool: 'eval-source-map',
entry: {
    index : './src/js/index.js',
    list : './src/js/list.js',
    about : './src/js/about.js'
},
output: {
path: __dirname+ '/build',//生成的目錄
 publicPath: PATHS.publicPath,
 filename: 'js/[name]-[hash:8].js',
chunkFilename: 'js/[name]-[hash:8].js'   //chunk生成的配置
},
module: {
    rules: [

        {
            test: /\.(scss|css)$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use:[
                    'css-loader','postcss-loader','sass-loader'
                ]
            })
        },
        {
            test : /\.vue$/,
            loader : 'vue-loader',
            options : {
                postcss : [require('autoprefixer')({browsers : ['last 3 versions']})]
            }
        },

        {
            test : /\.js$/,
            loader : 'babel-loader',
        },
     {
        test: /\.(png|gif|jpe?g)$/,
         loader: 'url-loader',
         query: {
             /*
              *  limit=10000 ： 10kb
              *  圖片大小小於10kb 採用內聯的形式，不然輸出圖片
              * */
             limit: 10000,
             name: 'images/[name]-[hash:8].[ext]'
         }

     },
    {
        test: /\.html$/,
        loader: "html-loader?attrs=img:src img:data-src",
        query: {
            minimize: true
        }
        },
    {
        //文件加載器，處理文件靜態資源
        test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader?name=./fonts/[name]-[hash:8].[ext]'
    }

]
},
plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: 'common', // 將公共模塊提取，生成名爲`common`的chunk
        chunks: ['index','list','about'], //提取哪些模塊共有的部分
        minChunks: 3 // 提取至少3個模塊共有的部分
    }),

    new webpack.ProvidePlugin({
        $:"jquery",
        jQuery:"jquery",
        "window.jQuery":"jquery"
    }),
 /*
  * clean publishing directory
  * （發佈前清空發佈目錄）
  * */
    new CleanWebpackPlugin(['build'], {
        root: '', // An absolute path for the root  of webpack.config.js
        verbose: true,// Write logs to console.
        dry: false // Do not delete anything, good for testing.
    }),
    /*
     * extract css
     * （提取css文件到單獨的文件中）
     */
    new ExtractTextPlugin("css/[name]-[chunkhash:8].css"),
    new HtmlWebpackPlugin({ //根據模板插入css/js等生成最終HTML
        favicon: './src/images/favicon.ico', //favicon路徑，經過webpack引入同時能夠生成hash值
        filename: './index.html', //生成的html存放路徑，相對於path
        template: './src/index.html', //html模板路徑
        inject: 'body', //js插入的位置，true/'head'/'body'/false
        chunks: ['common', 'index'],
        //hash: true ,//爲靜態資源生成hash值
        minify: { //壓縮HTML文件
            removeComments: true, //移除HTML中的註釋
            collapseWhitespace: false //刪除空白符與換行符
        }
    }),
    new HtmlWebpackPlugin({
        favicon: './src/images/favicon.ico',
        filename: './about.html',
        template: './src/about.html',
        inject: 'body',
        chunks: ['common', 'about'],
       // hash: true,
        minify: { //壓縮HTML文件
            removeComments: true, //移除HTML中的註釋
            collapseWhitespace: false //刪除空白符與換行符
        }
    }),
    new HtmlWebpackPlugin({
        favicon: './src/images/favicon.ico',
        filename: './list.html',
        template: './src/list.html',
        inject: 'body',
        chunks: ['common', 'list'],
        //hash: true
    }),
    //new webpack.optimize.UglifyJsPlugin(),//壓縮
    new webpack.optimize.UglifyJsPlugin({ // js、css都會壓縮
        mangle: {
            except: ['$super', '$', 'exports', 'require', 'module', '_']
        },
        compress: {
            warnings: false
        },
        output: {
            comments: false,
        }
    }),

    new webpack.HotModuleReplacementPlugin() //熱加載
],
devServer: {
    contentBase: './',
    host: 'localhost',
    port: 8000,
    inline: true, //自動更新頁面
    hot: true,
}
}

use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use:[
                        {
                            loader: 'css-loader',
                            options:{
                                minimize: true //css壓縮
                            }
                        }
                    ]
                })
            },

用ExtractTextPlugin這個插件，webpack2的寫法變了些，給css-loader加上options這個參數，你的

test: /\.(scss|css)$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use:[
                    'css-loader','postcss-loader','sass-loader'
                ]
            })

最好拆分寫

  test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use:[
                        {
                            loader: 'css-loader',
                            options:{
                                minimize: true //css壓縮
                            }
                        }
                    ]
                })
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            },