Как заменить style-loader на mini-css-extract-plugin?

Для замены style-loader на mini-css-extract-plugin в конфигурации Webpack, следуйте этим шагам:

1. Установите пакет mini-css-extract-plugin с помощью менеджера пакетов, такого как npm или yarn:

npm install mini-css-extract-plugin --save-dev

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

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

3. Замените style-loader на MiniCssExtractPlugin.loader в соответствующих правилах для загрузки CSS-файлов. Например, если у вас есть правило для .css файлов:

module: {
  rules: [
    {
      test: /.css$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    }
  ]
}

вам нужно заменить 'style-loader' на 'MiniCssExtractPlugin.loader':

module: {
  rules: [
    {
      test: /.css$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader'
      ]
    }
  ]
}

4. Добавьте экземпляр MiniCssExtractPlugin в раздел plugins вашей конфигурации:

plugins: [
  new MiniCssExtractPlugin()
]

5. Теперь ваша конфигурация Webpack будет использовать mini-css-extract-plugin вместо style-loader, и CSS-файлы будут извлекаться в отдельные файлы, а не встраиваться внутрь <style> тега в HTML файле.

Важно отметить, что mini-css-extract-plugin может использоваться только в режиме сборки (production), поэтому вы должны убедиться, что ваша сборка настроена на этот режим, например, через переменную среды NODE_ENV=production или другим способом.

Также не забудьте обновить зависимости в ваших проектах и протестировать конфигурацию, чтобы убедиться, что замена прошла успешно.