如何使用webpack最小化我的css文件

我正在使用webpack並希望最小化css文件。這時它是2.25MB。我發現這個optimize-css-assets-webpack-plugin插件，但它沒有幫助，我的css文件是相同的大小。這是我的設置如何使用webpack最小化我的css文件

'use strict';  
const webpack = require('webpack'); 
const merge = require('webpack-merge'); 
const webpackCommon = require('./webpack-common.config'); 
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 

module.exports = merge(webpackCommon, { 
    devtool: 'none', 
    plugins: [ 
     new webpack.optimize.OccurrenceOrderPlugin(), 
     new webpack.optimize.AggressiveMergingPlugin(), 
     new webpack.optimize.DedupePlugin(), 
     new webpack.optimize.UglifyJsPlugin({ 
     /\.js$/, 
     beautify: false, 
     comments: false, 
     compress: { 
      unused: true, 
      dead_code: true, 
      warnings: false, 
      screw_ie8: true 
     } 
     }), 
     new webpack.NoErrorsPlugin(), 
     new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': JSON.stringify('production'), 
     '__DEV__': false 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
     minChunks: 2, 
     maxChunks: 15, 
     minChunkSize: 10000, 
     name: 'vendor' 
     }), 
     new OptimizeCssAssetsPlugin({ 
     assetNameRegExp: /\.scss$/g, 
     cssProcessor: require('cssnano'), 
     cssProcessorOptions: { discardComments: { removeAll: true } }, 
     canPrint: true 
     }) 
    ] 
});

這是prod配置，它需要通用配置文件。這裏是

'use strict'; 

const path = require('path') 
const webpack = require('webpack') 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: { 
     main: './src/main.js', 
    }, 
    output: { 
     filename: '[name].js', 
     path: path.resolve(__dirname, '../../PashaGraph/WebClient/public') 
    }, 
    watch: true, 
    watchOptions: { 
     aggregateTimeout: 100 
    }, 
    plugins: [ 
     new ExtractTextPlugin("[name].css") 
    ], 
    module: { 
     loaders: [ 
     { 
      test: /\.js$/, 
      exclude: /node_modules/, 
      loader: 'babel' 
     }, 
     { 
      test: /\.scss$/, 
      loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap') 
     }, 
     { 
      test: /\.css$/, 
      loader: ExtractTextPlugin.extract('style', 'css-loader?minimize!sourceMap') 
     }, 
     { 
      test: /\.woff2?$|\.ttf$|\.eot$|\.svg$|\.png|\.jpe?g|\.gif$/, 
      exclude: /node_modules/, 
      loader: 'url-loader' 
     } 
     ] 
    }, 
    resolve: { 
     extensions: ['', '.js', '.jsx'] 
    } 
};

因爲你看我在我的應用程序中使用sass。也許這是它不減小尺寸的原因。

解決！其實我有字體，他們被轉換並嵌入到CSS文件。這就是爲什麼它是壓縮（2.25mb）這樣的大事件。順便說一句，我發現這個解決方案，以限制最大尺寸爲嵌入

{ 
      test: /\.woff2?$|\.ttf$|\.eot$|\.svg$|\.png|\.jpe?g|\.gif$/, 
      exclude: /node_modules/, 
      loader: "url-loader?limit=60&name=fonts/[name]_[hash].[ext]" 
     }

來源

2016-12-10 Pavel Poberezhnyi