webpack / cssnano не сжимает все CSS файлы? - PullRequest
Новая
       94

webpack / cssnano не сжимает все CSS файлы?

0 голосов
/ 06 апреля 2020

Я использую

  • webpack 4
  • post css -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 ...

И индекс. 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 были несжатыми, но помечены. css нет в node_modules. Тогда я подумал, что, может быть, это CSS файлы (файлы LESS сжаты). Это выглядит согласованно [найдено несколько CSS файлов, которые сжаты], но я использую тот же пост css -loaders для. css файлов, поэтому я не понимаю, почему это не так не работаешь на них?

1 Ответ

0 голосов
/ 06 апреля 2020

Я переместил шаг минимизации в OptimizeCSSAssetsPlugin: 

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

Следует также сохранить несколько дополнительных байтов, поскольку он может обрабатывать весь пакет одновременно, но я все еще хотел бы знать, что вызывало некоторые файлы не обрабатываются.

...