webpack css如何进行压缩

在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;
}

望请老师指导下,谢谢~

回复
阅读 20.9k
4 个回答

webpack v2.6.1

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

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

新手上路,请多包涵

test: /.css$/,

            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use:[
                    {
                        loader: 'css-loader',
                        options:{
                            minimize: true //css压缩
                        }
                    }
                ]
            })
        },
        
        通过配置解决css压缩,不用再 安装别的插件
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏