Как с помощью Webpack минифицировать несколько CSS не объединяя их?

С помощью Webpack можно минифицировать несколько CSS файлов без их объединения с помощью нескольких шагов.

Шаг 1: Установите необходимые зависимости
Для начала установите Webpack и другие необходимые пакеты. Установите npm, если у вас его еще нет, затем выполните следующую команду в корневой папке вашего проекта, чтобы установить Webpack:

npm install webpack --save-dev

Установите также пакеты для минификации CSS:

npm install css-loader mini-css-extract-plugin optimize-css-assets-webpack-plugin --save-dev

Шаг 2: Создайте конфигурационный файл Webpack
Создайте файл webpack.config.js в корневой папке вашего проекта и добавьте следующий код:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = {
  entry: {
    main: "./src/index.js", // Ваши CSS файлы
    css: "./src/main.css",
    styles: "./src/styles.css"
  },
  output: {
    filename: "[name].bundle.js",
    path: __dirname + "/dist"
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      }
    ]
  },
  optimization: {
    minimizer: [
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css"
    })
  ]
};

В этой конфигурации мы указываем точки входа для каждого CSS файла (в данном случае index.js, main.css и styles.css). Затем мы указываем, какие правила применять к файлам .css с помощью css-loader. MiniCssExtractPlugin используется для извлечения CSS из файла JavaScript и сохранения его в отдельных файлах CSS. Для минификации CSS мы используем плагин OptimizeCSSAssetsPlugin.

Шаг 3: Запустите сборку
Теперь вы можете запустить сборку, выполнив следующую команду в корневой папке вашего проекта:

npx webpack

Webpack соберет ваши CSS файлы, минифицирует их и поместит результаты в папку dist в соответствии с настройками в файле webpack.config.js. Каждый CSS файл будет сохранен в отдельном файле, готовом к использованию на вашем веб-сайте.

Вот и все! Теперь вы знаете, как с помощью Webpack минифицировать несколько CSS файлов без их объединения.