webpack(8)压缩css

1.安装插件：npm install optimize-css-assets-webpack-plugin -D

2.在webpack.config.js中引入使用该插件：

const{resolve}=require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//引入插件

module.exports={

    entry:{

        vender:['./src/js/jquery.js','./src/js/common.js'],

        index:'./src/js/index.js',

        cart:'./src/js/cart.js'

    },

    output:{

        path:resolve(__dirname,'build'),

        filename:'[name].js'

    },

    mode:'development',

    module:{

        rules:[

            //{test:/\.css$/,use:['style-loader','css-loader']},

            {test:/\.css$/,use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader']},

            {test:/\.less$/,use:[MiniCssExtractPlugin.loader,'css-loader','less-loader','postcss-loader']},

            {test:/\.scss$/,use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader','postcss-loader']}

        ]

    },

    plugins:[

        new HtmlWebpackPlugin({

            template:'./src/index.html',

            filename:'index.html',

            chunks:['vender','index']

        }),

        new HtmlWebpackPlugin({

            template:'./src/cart.html',

            filename:'cart.html',

            chunks:['vender','cart']

        }),

        new MiniCssExtractPlugin({

            filename:'index.css'

        }),

        new OptimizeCssAssetsPlugin()//使用插件，这里直接new一个对象使用默认配置，默认配置会去掉空格注释之类的。如果要自己手动配置压缩项也可以在这里配置。

    ]

}