[![npm][npm]][npm-url] [![node][node]][node-url] [![deps][deps]][deps-url] [![tests][tests]][tests-url] [![cover][cover]][cover-url] [![chat][chat]][chat-url] [![size][size]][size-url] # css-minimizer-webpack-plugin This plugin uses [cssnano](https://cssnano.co) to optimize and minify your CSS. Just like [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin) but more accurate with source maps and assets using query string, allows caching and works in parallel mode. ## Getting Started To begin, you'll need to install `css-minimizer-webpack-plugin`: ```console $ npm install css-minimizer-webpack-plugin --save-dev ``` Then add the plugin to your `webpack` configuration. For example: **webpack.config.js** ```js const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); module.exports = { module: { rules: [ { test: /.s?css$/, use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"], }, ], }, optimization: { minimizer: [ // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line // `...`, new CssMinimizerPlugin(), ], }, plugins: [new MiniCssExtractPlugin()], }; ``` This will enable CSS optimization only in production mode. If you want to run it also in development set the `optimization.minimize` option to `true`: **webpack.config.js** ```js // [...] module.exports = { optimization: { // [...] minimize: true, }, }; ``` And run `webpack` via your preferred method. ## Note about source maps **Works only with `source-map`, `inline-source-map`, `hidden-source-map` and `nosources-source-map` values for the [`devtool`](https://webpack.js.org/configuration/devtool/) option.** Why? Because CSS support only these source map types. The plugin respect the [`devtool`](https://webpack.js.org/configuration/devtool/) and using the `SourceMapDevToolPlugin` plugin. Using supported `devtool` values enable source map generation. Using `SourceMapDevToolPlugin` with enabled the `columns` option enables source map generation. Use source maps to map error message locations to modules (this slows down the compilation). If you use your own `minify` function please read the `minify` section for handling source maps correctly. ## Options | Name | Type | Default | Description | | :-----------------------------------------: | :--------------------------------------------: | :--------------------------------: | :---------------------------------------------------------------------- | | **[`test`](#test)** | `String\|RegExp\|Array` | `/\.css(\?.*)?$/i` | Test to match files against. | | **[`include`](#include)** | `String\|RegExp\|Array` | `undefined` | Files to include. | | **[`exclude`](#exclude)** | `String\|RegExp\|Array` | `undefined` | Files to exclude. | | **[`parallel`](#parallel)** | `Boolean\|Number` | `true` | Enable/disable multi-process parallel running. | | **[`minify`](#minify)** | `Function\|Array` | `CssMinimizerPlugin.cssnanoMinify` | Allows to override default minify function. | | **[`minimizerOptions`](#minimizeroptions)** | `Object\|Array