webpack/cssnano 不压缩所有 CSS 文件？

Question

我正在使用

• webpack 4
• postcss-loader
• cssnano
• mini-css-extract-plugin

postcss/cssnano 配置如下所示：

    {
        loader: 'postcss-loader',
        options: {
            sourceMap: true,
            plugins: loader => {
                const plugins = [
                    require('postcss-preset-env')(),
                ];
                if (nodeEnv === 'production') {
                    plugins.push(
                        require('cssnano')({
                            preset: ['default',
                                {
                                    discardComments: {
                                        remove: comment => !copyrightPatt.test(comment),
                                    },
                                }
                            ]
                        }),
                    );
                }
                return plugins;
            },
        }
    },

加载器如下所示：

      {
        test: /\.css$/,
        use: [
          '.../node_modules/mini-css-extract-plugin/dist/loader.js',
          {
            loader: 'css-loader',
            options: {
              modules: [Object],
              localsConvention: 'dashes',
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: { sourceMap: true, plugins: [Function: plugins] }
          }
        ]
      },
      {
        test: /\.less$/,
        use: [
          '.../node_modules/mini-css-extract-plugin/dist/loader.js',
          {
            loader: 'css-loader',
            options: {
              modules: [Object],
              localsConvention: 'dashes',
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: { sourceMap: true, plugins: [Function: plugins] }
          },
          {
            loader: 'less-loader',
            options: { sourceMap: false, strictMath: true, strictUnits: true }
          }
        ],
        exclude: '.../src/resources/assets/scripts/components'
      },
      {
        test: /\.less$/,
        use: [
          '.../node_modules/mini-css-extract-plugin/dist/loader.js',
          {
            loader: 'css-loader',
            options: {
              modules: [Object],
              localsConvention: 'dashes',
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: { sourceMap: true, plugins: [Function: plugins] }
          },
          {
            loader: 'less-loader',
            options: { sourceMap: false, strictMath: true, strictUnits: true }
          }
        ],
        include: '.../src/resources/assets/scripts/components'
      },

我有一个如下所示的index.less 文件：

@import './anticon';
@import '~antd/lib/select/style/index.css';
.ant-select-dropdown-menu {
    margin: 0;
}
.anticon-down:before {
    content: none; 
}
@import 'forms.less';
@import 'tables.less';
@import '../markons/markons.css';
... more imports ...

还有一个 index.js 文件和另一个 css 导入：

require('trumbowyg/dist/ui/trumbowyg.css');

输出的css文件如下：

my css, compressed
source of trumbowyg/dist/ui/trumbowyg.css, uncompressed
source of antd/lib/select/style/index.css, uncompressed
markons.css, uncompressed
more more my css, compressed

我想弄清楚为什么有些源没有解压缩？

我以为可能是node_modules下的所有未压缩的，但是markons.css不在node_modules下。所以我想也许是 CSS 文件（LESS 文件被压缩）。 这似乎是一致的 [找到了一些压缩的 CSS 文件]，但我对 .css 文件使用了相同的 postcss-loaders，所以我不明白为什么它对它们不起作用？

Answer 1

我将缩小步骤移到OptimizeCSSAssetsPlugin：

        optimization: {
            minimizer: [
                new OptimizeCSSAssetsPlugin({
                    cssProcessor: require('cssnano'),
                    cssProcessorPluginOptions: {
                        preset: ['default',
                            {
                                discardComments: {
                                    remove: comment => !copyrightPatt.test(comment),
                                },
                            }
                        ]
                    },
                })
            ]
        }

也应该节省一些额外的字节，因为它可以一次处理整个包，但我仍然想知道是什么导致某些文件无法处理。