如何在 webpack 配置下拆分媒体查询？答案

【问题标题】：How to split media queries under webpack config?如何在 webpack 配置下拆分媒体查询？
【发布时间】：2019-05-28 11:56:29
【问题描述】：

因为我们可以像下面这样导入样式表：

<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文件来帮助更快地加载网站。MDN

我没有运气搜索可以拆分查询的 webpack 配置，或者至少让我手动指定应该在哪个媒体上加载哪个 css 条目。

我唯一的解决方案是编写 nodejs 脚本并在构建时注入 index.html，但在我看来这不是干净的方法。

那么有没有这种东西的 webpack 配置？

【问题讨论】：

我认为你希望 webpack 为你将你的样式分成 2 个 css 文件，对吧？
我更喜欢 webpack 通过存在多少不同的媒体查询来分离 css，并将它们作为链接标签导入 html 文件的标题

标签： javascript reactjs webpack code-splitting

【解决方案1】：

如果不进行动态导入，您将受限于 Webpack 在编译时作为静态模块捆绑器所能做的事情。因为您希望获得的行为在运行时是必需的，所以 Webpack 无法推断出任何东西，只能推断出您已经告诉它的有关环境的内容。

话虽如此，您可以创建multiple build outputs，每个都为特定平台配置。假设你的代码库中唯一的区别是你的 CSS，除了你的输出 CSS 之外的所有东西在每个构建配置中都应该是相同的。走这条路线意味着设置多条路线，每种媒体类型都有一条路线，并从该配置中提供文件。

这肯定比沿着动态导入路径做更多的工作，但它是可行的，并且可以按媒体类型完全隔离您的应用程序。

【讨论】：

【解决方案2】：

这更像是一个评论，但我相信有一个插件：

https://github.com/SassNinja/media-query-plugin

您是否考虑过从 CSS 中提取媒体查询，以便移动用户不必加载特定于桌面的 CSS？如果是这样，这个插件就是你所需要的！

【讨论】：

据我所知，我应该使用命名约定手动将我的 css 文件与媒体查询分开。这不正是我正在寻找的，它也使用动态导入来导入我宁愿不使用的 css。但这可以让生活更轻松一些。
还有一个来自同一作者的 PostCss 对应物：github.com/SassNinja/postcss-extract-media-query。我猜他/她喜欢他们的媒体查询
Deffenetly 他/她进入媒体查询。您对动态导入有何看法。我更喜欢使用链接标签。实际上我之前遇到过这个插件，但我必须在我的 index.html 文件上手动添加链接标签，我会尝试看看它是否真的以这种方式工作。