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

我正在使用webpack，希望最小化css文件。现在是2.25MB。我发现这个优化css资产网页包插件，但它没有帮助，我的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 config，需要公共配置文件。给你

'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]"
         }

---

不要在生产代码中使用源映射。删除

！sourceMap

只需使用-p选项运行Web包。它将建立生产非常高的压缩

网页包-p

---

此外，您可能需要将Node_环境设置为production，否则最终版本将在浏览器控制台中显示一些警告消息。

您还可以缩小css类名-这可以减少多达40%的包大小。

---

谢谢，我这样做了，但我的bundle.css文件的大小与解决方案相同。我也找到了自己的解决方案，并用它更新了问题的解决方案！Thshow这个插件与js libs中的类一起工作，如果相关的css放在index.html中？