Webpack, css-minimizer-webpack-plugin vs mini-css-extract-plugin

Question

I am always using mini-css-extract-plugin to optimize CSS. Today I found a new project, css-minimizer-webpack-plugin fromhere , seems like this project do the same thing as mini-css-extract-plugin .

What is the advantage of css-minimizer-webpack-plugin ? I read the docs and article from google, seems no one is talking about it? Should I use css-minimizer-webpack-plugin to replace the mini-css-extract-plugin ?

Answer 1

They are not for the same purpose. css-minimizer-webpack-plugin is used to compress the css files produced by min-css-extract-plugin . Here is how thy are used (I am in webpack.config.js ):

 //min-css-extract-plugin goes in the plugins array
 plugins: [
    new MiniCssExtractPlugin({
      filename:
        mode === "production"
          ? "css/[name].[contenthash].chunk.css"
          : "css/[name].css",
    }),
  ],
 //css-minimizer-webpack-plugin goes in the optimization object in minimizer array
 optimization:{
  minimizer: ["...", new CssMinimizerPlugin()],
 }