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">
これは、media属性条件を満たすCSSファイルのみをロードすることで、Webサイトのロードを高速化するのに役立ちます。 [〜＃〜] mdn [〜＃〜]
クエリを分割できるwebpack構成を検索することはできませんでした。少なくとも、どのメディアにどのcssエントリをロードするかを手動で指定することができました。
私の唯一の解決策は、nodejsスクリプトを記述してindex.htmlビルド時にですが、私の意見ではそれを行うにはクリーンな方法ではありません。
このようなもののためのwebpack設定はありますか？
動的インポートを行わなければ、コンパイル時にWebpackが静的モジュールバンドルとして実行できることに制限されます。取得しようとしている動作は実行時に必要であるため、Webpackは、環境についてすでに伝えていること以外は何も推測できません。
そうは言っても、特定のプラットフォーム用にそれぞれ構成された 複数のビルド出力 を作成できます。コードベースの唯一の違いがCSSであると仮定すると、出力CSSを除くすべてが各ビルド構成で同一である必要があります。このルートに進むことは、各メディアタイプに1つずつ、複数のルートを設定し、その構成からファイルを提供することを意味します。
動的インポートパスをたどるよりも間違いなく多くの作業ですが、実行可能であり、アプリケーションをメディアタイプ別に完全に分離します。