webpack css如何进行压缩

Question

在webpack配置中，用ExtractTextPlugin分离css，用UglifyJSPlugin可以对js进行压缩，那么css怎么进行压缩呢？

我的代码如下：

webpack.config.js

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

module.exports = {
    entry: {
        main: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    module: {
        rules: [{
            test: /\.less$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: ['css-loader', 'less-loader']
            })
        }]
    },
    plugins: [
        new ExtractTextPlugin('[name].css'),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'commons',
            filename: 'commons.js'
        }),
        new UglifyJSPlugin()
    ]
}

./src/main.js

require('./main.less');
console.log('abcd...');

./src/main.less

h1 {
    font-size: 20px;
    p {
        color: red;
    }
}

h2 {
    font-size: 16px;
}

望请老师指导下，谢谢~

Answer 1

试试 https://www.npmjs.com/package...

使用该插件后，生成的 main.css 如下：

h1{font-size:20px}h1 p{color:red}h2{font-size:16px}

Answer 2

webpack v2.6.1

{
  loader: 'css-loader',
  options: {
    minimize: true
  }
}

或者postcss-loader+cssnano 也可以同样实现相同效果

Answer 3

test: /.css$/,

            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use:[
                    {
                        loader: 'css-loader',
                        options:{
                            minimize: true //css压缩
                        }
                    }
                ]
            })
        },
        
        通过配置解决css压缩,不用再 安装别的插件

Answer 4

试试这个
https://www.npmjs.com/package...