webpack优化构建体积示例-压缩css：

小强有个dream

已于 2024-05-16 11:00:30 修改

阅读量302

点赞数 5

文章标签： webpack css 前端

于 2024-05-13 15:01:52 首次发布

本文链接：https://blog.csdn.net/qq_36413371/article/details/138796307

版权

css-loader用来解析.css文件，将之转换成commjs模块
style-loader用来将css注入到dom中
尽管css-loader和style-loader提供将css导入到js并注入到dom的功能，但webpack默认并不负责压缩css，

css-minimizer-webpack-plugin只处理分离出来的CSS文件，
所以当CSS代码嵌入到JavaScript中时，它不会被该插件压缩。
您应该使用MiniCssExtractPlugin来将CSS提取到单独的文件中，
然后css-minimizer-webpack-plugin才会对这些文件进行压缩。

src/index.js
import './style.css'

let a = 1;

src/style.css
.main {
    background-color: red;
    /* testcss */
    font-size: 18px;

}

压缩前

// webpack.config.js
const cssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
    },
    mode: 'production',
    module: {
        rules: [{
            test: /\.css$/i,
            use: [
                 MiniCssExtractPlugin.loader, // 提取CSS到单独文件  
             'css-loader']
        }]
    },
    plugins: [  
        new MiniCssExtractPlugin({  
            filename: '[name].[contenthash].css', // 输出的CSS文件名  
        }),  
    ], 
    optimization: {
        minimize: true,
        minimizer: [
             // 默认情况下，不需要配置minimizerOptions
            new cssMinimizerPlugin({
                minimizerOptions: {
                    preset: ['default', {
                        // cssnano配置项
                        discardComments: {
                            removeAll: true,//丢弃所有注释
                        }
                    }]
                },
            })
        ]
    }
}

在这里插入图片描述

压缩后

// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
    },
    mode: 'production',
    module: {
        rules: [{
            test: /\.css$/i,
            use: [
                 MiniCssExtractPlugin.loader, // 提取CSS到单独文件  
             'css-loader']
        }]
    },
    plugins: [  
        new MiniCssExtractPlugin({  
            filename: '[name].[contenthash].css', // 输出的CSS文件名  
        }),  
    ], 
}