Как разделить медиа-запросы в конфигурации webpack?
поскольку мы можем импортировать таблицы стилей, как показано ниже:
<link rel = "stylesheet" media = "screen and (min-width: 900px)" href = "widescreen.css">
<link rel = "stylesheet" media = "screen and (max-width: 600px)" href = "smallscreen.css">
и это поможет ускорить загрузку веб-сайта за счет загрузки только файла css, который соответствует условиям атрибута media.
Мне не удалось найти конфигурацию webpack, которая может разделять запросы или, по крайней мере, позволить мне вручную указать, какая запись css должна загружаться на каком носителе.
Моим единственным решением было написать сценарий nodejs и внедрить index.html во время сборки, но, на мой взгляд, это не чистый способ сделать это.
так есть ли какая-нибудь конфигурация webpack для такого рода вещей?
Я предпочитаю, чтобы веб-пакет разделял css по количеству существующих медиа-запросов и импортирую их как тег ссылки в заголовке html файла.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Это больше похоже на комментарий, но я считаю, что для этого есть плагин:
https://github.com/SassNinja/media-query-plugin
Have you ever thought about extracting your media queries from your CSS so a mobile user doesn't have to load desktop specific CSS? If so this plugin is what you need!
Насколько я понимаю, я должен прописывать свои файлы css с медиа-запросами вручную с соглашением об именах. Это не совсем то, что я ищу, также он использует динамический импорт для импорта css, который я предпочитаю не использовать. Но это может немного облегчить жизнь.
Также существует аналог PostCss от того же автора: github.com/SassNinja/postcss-extract-media-query. Я думаю, они ему нравятся медиа-запросы
Обязательно он / она в медиа-запросы. Что вы думаете о динамическом импорте? Я предпочитаю использовать тег ссылки. На самом деле я сталкивался с этим плагином раньше, но мне придется вручную добавить тег ссылки в мой файл index.html, я попробую посмотреть, действительно ли он работает таким образом.
Без динамического импорта вы ограничены тем, что Webpack может делать как сборщик статических модулей во время компиляции. Поскольку поведение, которое вы хотите получить, требуется во время выполнения, Webpack не может сделать никаких выводов, кроме того, что вы уже сказали ему о среде.
Сказав это, вы можете создать несколько выходов сборки, каждый из которых настроен для определенной платформы. Предполагая, что единственная разница в вашей кодовой базе - это ваш CSS, все, кроме вашего выходного CSS, должно быть идентичным для каждой конфигурации сборки. Переход по этому маршруту означает настройку нескольких маршрутов, по одному для каждого типа мультимедиа, и обслуживание файлов из этой конфигурации.
Это определенно больше работы, чем идти по пути динамического импорта, но это выполнимо и полностью разделяет ваше приложение по типу носителя.
Я так понимаю, вы хотите, чтобы webpack разделил ваши стили на 2 файла css, верно?