CssMinimizerWebpackPlugin

这个插件使用 cssnano 优化和压缩 CSS。

就像 optimize-css-assets-webpack-plugin 一样，但在 source maps 和 assets 中使用查询字符串会更加准确，支持缓存和并发模式下运行。

起步

首先，你需要安装 css-minimizer-webpack-plugin：

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

接着在 webpack 配置中加入该插件。示例：

webpack.config.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: [
      // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
      // `...`,
      new CssMinimizerPlugin(),
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

这将仅在生产环境开启 CSS 优化。

如果还想在开发环境下启用 CSS 优化，请将 optimization.minimize 设置为 true:

webpack.config.js

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

然后通过你喜欢的方式运行 webpack。

关于 source maps 的提示

仅对 devtool 配置项的 source-map、inline-source-map、hidden-source-map 与 nosources-source-map 值生效。

为什么呢？因为 CSS 仅支持这些 source map 类型。

插件支持 devtool 并且使用 SourceMapDevToolPlugin 插件。 使用受支持的 devtool 值可以启用 source map 生成。 使用 SourceMapDevToolPlugin 并启用 columns 配置项可以启用 source map 生成。

使用 source map 将错误信息位置映射到 modules 中（这降低了复杂度）。 如果你是用自定义 minify 函数，请阅读 minify 章节以确保正确处理 source map。

选项

test

类型：String|RegExp|Array<String|RegExp> - 默认值：/\.css(\?.*)?$/i

用来匹配文件。

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

include

类型：String|RegExp|Array<String|RegExp> 默认值：undefined

要包含的文件。

webpack.config.js

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

exclude

类型：String|RegExp|Array<String|RegExp> 默认值：undefined

要排除的文件。

webpack.config.js

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

parallel

类型：Boolean|Number 默认值：true

使用多进程并发执行，提升构建速度。 运行时默认的并发数：os.cpus().length - 1。

ℹ️ 并行化可以显著提升构建速度，所以强烈建议使用。 如果启用了并行化，minimizerOptions 中的包必须通过字符串引入（packageName 或者 require.resolve(packageName)）。在 minimizerOptions 获取更多详细信息。

Boolean

启用/禁用多进程并发执行。

webpack.config.js

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

Number

启用多进程并发执行且设置并发数。

webpack.config.js

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

minify

类型：Function|Array<Function> 默认值：CssMinimizerPlugin.cssnanoMinify

允许覆盖默认的 minify 函数。 默认情况下，插件使用 cssnano 包。 对于使用和测试未发布或版本衍生版本很有用。

可选配置：

• CssMinimizerPlugin.cssnanoMinify
• CssMinimizerPlugin.cssoMinify
• CssMinimizerPlugin.cleanCssMinify
• CssMinimizerPlugin.esbuildMinify
• async (data, inputMap, minimizerOptions) => {return {code: "a{color: red}", map: "...", warnings: [], errors: []}}

⚠️ 启用 parallel 选项时，始终在 minify 函数中使用 require。

Function

webpack.config.js

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

Array

如果 minify 配置项传入一个数组，minimizerOptions 也必须是个数组。 miniify 数组中的函数索引对应于 minimizerOptions 数组中具有相同索引的 options 对象。

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        minimizerOptions: [
          {}, // 第一个函数的配置项（CssMinimizerPlugin.cssnanoMinify）
          {}, // 第二个函数的配置项（CssMinimizerPlugin.cleanCssMinify）
          {}, // 第三个函数的配置项
        ],
        minify: [
          CssMinimizerPlugin.cssnanoMinify,
          CssMinimizerPlugin.cleanCssMinify,
          async (data, inputMap, minimizerOptions) => {
            // To do something
            return {
              code: `a{color: red}`,
              map: `{"version": "3", ...}`,
              warnings: [],
              errors: [],
            };
          },
        ],
      }),
    ],
  },
};

minimizerOptions

类型：Object|Array<Object> 默认值：{ preset: 'default' }

Cssnano 优化 选项.

Object

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

Array

miniify 数组中的函数索引对应于 minimizerOptions 数组中具有相同索引的 options 对象。 如果你使用了类似于 minimizerOptions 的对象，那么所有函数都会接受它。

如果启用了并行化，minimizerOptions 中的包必须通过字符串引入（packageName 或者 require.resolve(packageName)）。在这种情况下，我们不应该使用 require/import。

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

processorOptions (⚠ only cssnano)

类型：Object 默认值：{ from: assetName }

允许配置 cssnano 的 processoptions 配置项。 parser、 stringifier 和 syntax 可以是一个函数，也可以是一个字符串，用来表示将会被导出的模块。

⚠️ 如果传入一个函数，则必须禁用parallel 配置项。.

import sugarss from 'sugarss';

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

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

warningsFilter

类型：Function<(warning, file, source) -> Boolean> 默认值：() => true

允许过滤 css-minimizer warnings（默认使用 cssnano）。 返回 true 将保留 warning，否则返回假值（false/null/undefined）。

⚠️ 如果没有使用 source maps，source 参数将包含 undefined。

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        warningsFilter: (warning, file, source) => {
          if (/Dropping unreachable code/i.test(warning)) {
            return true;
          }

          if (/file\.css/i.test(file)) {
            return true;
          }

          if (/source\.css/i.test(source)) {
            return true;
          }

          return false;
        },
      }),
    ],
  },
};

示例

使用 sourcemaps

不要忘记为所有 loader 启用 sourceMap 选项。

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

module.exports = {
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /.s?css$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { sourceMap: true } },
          { loader: 'sass-loader', options: { sourceMap: true } },
        ],
      },
    ],
  },
  optimization: {
    minimizer: [new CssMinimizerPlugin()],
  },
  plugins: [new MiniCssExtractPlugin()],
};

移除所有注释

移除所有注释（包括以 /*! 开头的注释）。

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

使用自定义 minifier csso

webpack.config.js

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

使用自定义 minifier clean-css

webpack.config.js

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

Using custom minifier esbuild

webpack.config.js

module.exports = {
  devtool: 'source-map',
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        minify: CssMinimizerPlugin.esbuildMinify,
      }),
    ],
  },
};

贡献

如果你还没有阅读，请花一点时间阅读我们的贡献指南。

CONTRIBUTING

License

MIT