css-minimizer-webpack-plugin

Getting Started

npm install css-minimizer-webpack-plugin --save-dev

yarn add -D css-minimizer-webpack-plugin

pnpm add -D css-minimizer-webpack-plugin

constCssMinimizerPlugin=require("css-minimizer-webpack-plugin");constMiniCssExtractPlugin=require("mini-css-extract-plugin");module.exports={module:{rules:[{test:/\.s?css$/,use:[MiniCssExtractPlugin.loader,"css-loader","sass-loader"],},],},optimization:{minimizer:[// For webpack v5, you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line // `...`,newCssMinimizerPlugin(),],},plugins:[newMiniCssExtractPlugin()],};

Note

This enables CSS optimization only in production mode by default.

// [...]module.exports={optimization:{// [...]minimize:true,},};

Note about source maps

Options

test

module.exports={optimization:{minimize:true,minimizer:[newCssMinimizerPlugin({test:/\.foo\.css$/i,}),],},};

include

module.exports={optimization:{minimize:true,minimizer:[newCssMinimizerPlugin({include:/\/includes/,}),],},};

exclude

module.exports={optimization:{minimize:true,minimizer:[newCssMinimizerPlugin({exclude:/\/excludes/,}),],},};

parallel

Boolean

module.exports={optimization:{minimize:true,minimizer:[newCssMinimizerPlugin({parallel:true,}),],},};

Number

module.exports={optimization:{minimize:true,minimizer:[newCssMinimizerPlugin({parallel:4,}),],},};

minify

Warning

Always userequire insideminify function whenparallel option is enabled.

Function

module.exports={optimization:{minimize:true,minimizer:[newCssMinimizerPlugin({minimizerOptions:{level:{1:{roundingPrecision:"all=3,px=5",},},},minify:CssMinimizerPlugin.cleanCssMinify,}),],},};

Array

module.exports={optimization:{minimize:true,minimizer:[newCssMinimizerPlugin({minimizerOptions:[{},// Options for the first function (CssMinimizerPlugin.cssnanoMinify),{},// Options for the second function (CssMinimizerPlugin.cleanCssMinify),{},// Options for the third function],minify:[CssMinimizerPlugin.cssnanoMinify,CssMinimizerPlugin.cleanCssMinify,async(data,inputMap,minimizerOptions)=>//  Custom minifier function({code:"a{color: red}",map:'{"version": "3", ...}',warnings:[],errors:[],}),],}),],},};

minimizerOptions

Object

module.exports={optimization:{minimize:true,minimizer:[newCssMinimizerPlugin({minimizerOptions:{preset:["default",{discardComments:{removeAll:true},},],},}),],},};

Array

module.exports={optimization:{minimize:true,minimizer:[newCssMinimizerPlugin({minimizerOptions:{preset:require.resolve("cssnano-preset-simple"),},}),],},};

processorOptions (⚠ only cssnano)

Warning

If any of these options are passed as a function, theparallel option must be disabled..

importsugarssfrom"sugarss";module.exports={optimization:{minimize:true,minimizer:[newCssMinimizerPlugin({parallel:false,minimizerOptions:{processorOptions:{parser:sugarss,},},}),],},};

module.exports={optimization:{minimize:true,minimizer:[newCssMinimizerPlugin({minimizerOptions:{processorOptions:{parser:"sugarss",},},}),],},};

warningsFilter

Warning

Thesource parameter will beundefined unless source maps are enabled.

module.exports={optimization:{minimize:true,minimizer:[newCssMinimizerPlugin({warningsFilter:(warning,file,source)=>{if(/Droppingunreachablecode/i.test(warning)){returntrue;}if(/file\.css/i.test(file)){returntrue;}if(/source\.css/i.test(source)){returntrue;}returnfalse;},}),],},};

Examples

Use sourcemaps

constCssMinimizerPlugin=require("css-minimizer-webpack-plugin");module.exports={devtool:"source-map",module:{rules:[{test:/\.s?css$/,use:[MiniCssExtractPlugin.loader,{loader:"css-loader",options:{sourceMap:true}},{loader:"sass-loader",options:{sourceMap:true}},],},],},optimization:{minimizer:[newCssMinimizerPlugin()],},plugins:[newMiniCssExtractPlugin()],};

Remove all comments

module.exports={optimization:{minimizer:[newCssMinimizerPlugin({minimizerOptions:{preset:["default",{discardComments:{removeAll:true},},],},}),],},};

Using custom minifiercsso

module.exports={// Uncomment if you need source maps// devtool: "source-map",optimization:{minimize:true,minimizer:[newCssMinimizerPlugin({minify:CssMinimizerPlugin.cssoMinify,// Uncomment this line for options// minimizerOptions: { restructure: false },}),],},};

Using custom minifierclean-css

module.exports={// Uncomment if you need source maps// devtool: "source-map",optimization:{minimize:true,minimizer:[newCssMinimizerPlugin({minify:CssMinimizerPlugin.cleanCssMinify,// Uncomment this line for options// minimizerOptions: { compatibility: 'ie11,-properties.merging' },}),],},};

Using custom minifieresbuild

module.exports={// Uncomment if you need source maps// devtool: "source-map",optimization:{minimize:true,minimizer:[newCssMinimizerPlugin({minify:CssMinimizerPlugin.esbuildMinify,}),],},};

Using custom minifierlightningcss, previously@parcel/css

module.exports={// devtool: "source-map", // Uncomment for source mapsoptimization:{minimize:true,minimizer:[newCssMinimizerPlugin({minify:CssMinimizerPlugin.lightningCssMinify,// Uncomment this line for options// minimizerOptions: { targets: { ie: 11 }, drafts: { nesting: true }},}),],},};

Using custom minifierswc

module.exports={// devtool: "source-map", // Uncomment for source mapsoptimization:{minimize:true,minimizer:[newCssMinimizerPlugin({minify:CssMinimizerPlugin.swcMinify,// Uncomment this line for options// minimizerOptions: {},}),],},};

Contributing

License