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一个对象使用默认配置,默认配置会去掉空格注释之类的。如果要自己手动配置压缩项也可以在这里配置。
    ]
}
posted @ 2021-03-13 10:01  maycpou  阅读(72)  评论(0编辑  收藏  举报