Как при помощи webpack выносить медиазапросы в отдельный файл?

В Webpack есть несколько подходов к выносу медиазапросов в отдельный файл.

Первый подход - использование специальной библиотеки, такой как extract-media-queries-webpack-plugin. Эта библиотека позволяет выносить медиазапросы в отдельные CSS файлы. Для начала установите плагин:

npm install --save-dev extract-media-queries-webpack-plugin

Затем добавьте плагин в конфигурацию Webpack:

const ExtractMediaQueriesWebpackPlugin = require("extract-media-queries-webpack-plugin");

module.exports = {
  // ... другая конфигурация
  plugins: [
    new ExtractMediaQueriesWebpackPlugin()
  ]
};

Теперь все медиазапросы будут вынесены в отдельные CSS файлы, которые можно подключить в HTML.

Второй подход - использование спецификации CSS Modules. CSS Modules - это методология именования классов в CSS, которая позволяет изолировать стили в отдельные модули. Используя CSS Modules, вы можете изолировать медиазапросы в отдельные модули и импортировать их в нужных местах вашего кода.

Для использования CSS Modules вместе с Webpack, вам нужно установить соответствующие загрузчики:

npm install --save-dev style-loader css-loader

Затем добавьте эти загрузчики в вашу конфигурацию Webpack:

module.exports = {
  // ... другая конфигурация
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[name]__[local]___[hash:base64:5]'
              }
            }
          }
        ]
      }
    ]
  }
};

Теперь вы можете создать модуль со стилями, включающими медиазапросы:

/* styles.css */

.someClass {
  color: red;
}

@media (min-width: 768px) {
  .someClass {
    color: blue;
  }
}

И импортировать его в своем JavaScript файле:

import styles from './styles.css';

Теперь вы можете использовать классы из модуля стилей, и медиазапросы будут применяться автоматически, в зависимости от размеров экрана.

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