To minimize and minify CSS with webpack, use the css-minimizer-webpack-plugin. It is a plugin for webpack that optimizes and minifies CSS files. It is based on the cssnano library, which is a widely-used CSS optimizer that helps reduce the size of CSS files by removing unnecessary whitespace, comments, and other redundant elements.

Installation

To install and configure webpack, follow these steps.

1. Open Terminal and run the following command:

npm install css-minimizer-webpack-plugin -D

2. Update webpack.config.js file.

Add an optimization object to the webpack configuration.

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  ...
  optimization: {
    minimize: true,
    minimizer: [new CssMinimizerPlugin()],
  },
}