css - 如何配置 cssnano 进行 CSS 缩小？

Question

我正在尝试为 postcss-loader 配置 cssnano 插件，它会缩小 CSS，非常相似，如 here 中所述。 .

Webpack 配置:

...

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, 
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                cssnano({
                  preset: ['default', {
                    discardComments: {
                      removeAll: true,
                    },
                    // how to find index of all available options?
                  }]
                })
              ]
            }
          },
          'sass-loader'
        ]
      }
    ]
  },

...

Here列出了 cssnano 文档中的所有优化

和here是如何在 default 预设之上覆盖单个优化 discardComments 的示例。

是否可以单独覆盖每个优化配置，例如使用 discardComments ？这对于为开发和生产创建单独的配置非常方便。

另外，在 this repo是一次不成功的尝试，只有最少的示例和样板。

编辑:cssnano 开发者告诉我们不可能单独配置每个优化，相反，可以单独使用每个优化插件 source

Answer 1

将 cssnano 与 postcss-loader 和 mini-css-extract-plugin 一起使用并不是 Webpack 中缩小的最佳选择，因为该设置会缩小单个源文件而不是整个发出的 CSS 文件(它有多余的空格)。最好的选择是使用 optimize-css-assets-webpack-plugin .

安装它:

npm install --save-dev optimize-css-assets-webpack-plugin

并使用将其添加到您的 Webpack 配置中:

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

...

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, 
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [] // Don't add cssnano here. Remove the loader completely if you have no plugins.
            }
          },
          'sass-loader'
        ]
      }
    ]
  },
  optimization: {
    minimizer: [
      new OptimizeCSSAssetsPlugin({
        // cssnano configuration
        cssProcessorPluginOptions: {
          preset: ['default', {
            discardComments: {
              removeAll: true
            }
          }],
        },
      })
    ]
  }

...

cssnano 选项索引:https://cssnano.co/optimisations/

但是，如果您使用 style-loader 而不是 mini-css-extract-plugin，则应将 postcss-loader 与 cssnano 一起使用，因为 optimize-css-assets-webpack-plugin 仅优化发出的 CSS 文件。