@ohos-ports/css-minimizer-webpack-plugin weekly downloads statistics

<div align="center"> <a href="https://github.com/webpack/webpack"> <img width="200" height="200" src="https://webpack.js.org/assets/icon-square-big.svg"> </a> </div>

[![npm][npm]][npm-url] [![node][node]][node-url] [![tests][tests]][tests-url] [![cover][cover]][cover-url] [![discussion][discussion]][discussion-url] [![size][size]][size-url]

css-minimizer-webpack-plugin

This plugin uses cssnano to optimize and minify your CSS.

It serves as a more accurate alternative to optimize-css-assets-webpack-plugin, with better support for source maps, assets with query strings, caching, and parallel processing.

Getting Started

To begin, you'll need to install css-minimizer-webpack-plugin:

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

or

yarn add -D css-minimizer-webpack-plugin

or

pnpm add -D css-minimizer-webpack-plugin

Then add the plugin to your webpack configuration. For example:

webpack.config.js

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const MiniCssExtractPlugin = 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 // `...`,
      new CssMinimizerPlugin(),
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

[!NOTE]

This enables CSS optimization only in production mode by default.

To enable it in development mode as well, set the optimization.minimize option to true:

webpack.config.js

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

Finally, run Webpack using your preferred method.

Note about source maps

This plugin works only with source-map, inline-source-map, hidden-source-map and nosources-source-map values for the devtool option.

Why? Because CSS support only these source map types.

The plugin respects the devtool setting and uses the SourceMapDevToolPlugin internally.

Using a supported devtool value enables source map generation.

Enabling the columns option in SourceMapDevToolPlugin also allows source map generation.

Use source maps to map error message locations to their original modules (note that this may slow down compilation).

If you use your own minify function please refer to the minify section for correct handling of source maps.

Options

Name	Type	Default	Description
test	String|RegExp|Array<String|RegExp>	/\.css(\?.*)?$/i	Test to match files against.
include	String|RegExp|Array<String|RegExp>	undefined	Files to include.
exclude	String|RegExp|Array<String|RegExp>	undefined	Files to exclude.
parallel	Boolean|Number	true	Enable or disable multi-process parallel running.
minify	Function|Array<Function>	CssMinimizerPlugin.cssnanoMinify	Allows to override default minify function.
minimizerOptions	Object|Array<Object>	{ preset: 'default' }	Cssnano optimisations options.
warningsFilter	Function<(warning, file, source) -> Boolean>	() => true	Allows filtering of css-minimizer warnings.

test

• Type: String|RegExp|Array<String|RegExp>
• Default: /\.css(\?.*)?$/i

Test to match files against.

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

include

• Type: String|RegExp|Array<String|RegExp>
• Default: undefined

Files to include.

webpack.config.js

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

exclude

• Type: String|RegExp|Array<String|RegExp>
• Default: undefined

Files to exclude.

webpack.config.js

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

parallel

• Type: Boolean|Number
• Default: true

Use multi-process parallel running to improve the build speed.…