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

望请老师指导下，谢谢~

解决方案

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

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

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

这篇关于webpack css如何进行压缩的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！