0
点赞
收藏
分享

微信扫一扫

webpack压缩css代码示例:压缩css

野见 2024-05-13 阅读 7
css-minimizer-webpack-plugin只处理分离出来的CSS文件,
所以当CSS代码嵌入到JavaScript中时,它不会被该插件压缩。
您应该使用MiniCssExtractPlugin来将CSS提取到单独的文件中,
然后css-minimizer-webpack-plugin才会对这些文件进行压缩。
// 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',
    },
    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,//丢弃所有注释
                        }
                    }]
                },
            })
        ]
    }
}
src/index.js
import './style.css'

let a = 1;

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

}
举报

相关推荐

0 条评论