Как минимизировать имена классов css в сборке webpack?

Для минимизации имен классов css в сборке webpack можно использовать плагины css-loader и postcss-loader.

1. Установите необходимые зависимости:

npm install css-loader postcss-loader --save-dev

2. Настройте webpack.config.js файл:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          'style-loader', // добавляет стили в DOM при загрузке страницы
          'css-loader', // распознает @import и url() и обрабатывает их
          'postcss-loader' // выполняет дополнительные преобразования CSS, включая минимизацию классов
        ]
      }
    ]
  },
  // ...
};

3. Создайте postcss.config.js файл с следующим содержимым:

module.exports = {
  plugins: [
    require('postcss-preset-env')({
      autoprefixer: { grid: false },
      stage: 3
    }),
    require('cssnano')({
      preset: ['default', {
        discardComments: {
          removeAll: true
        }
      }]
    })
  ]
};

В этом конфигурационном файле используется postcss-preset-env для поддержки новых возможностей CSS и cssnano для минимизации имен классов.

Теперь при сборке проекта webpack будет автоматически минимизировать имена классов в ваших стилях css. Сокращение имен классов позволит уменьшить размер файлов CSS и улучшить производительность загрузки страницы.