如何在 webpack 配置下拆分媒体查询？
How to split media queries under webpack config?
因为我们可以像下面这样导入样式表：
<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 配置？
这更像是评论，但我相信有一个插件：
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!
如果不进行动态导入，您将只能在编译时作为静态模块捆绑器使用 Webpack 执行的操作。因为您想要获得的行为在运行时是必需的，所以 Webpack 只能推断出您已经告诉它的有关环境的信息。
话虽如此，您可以创建 multiple build outputs 每个都针对特定平台进行配置。假设您的代码库中的唯一区别是您的 CSS，除了您的输出 CSS 之外的所有内容在每个构建配置中都应该相同。走这条路线意味着设置多条路线，一种用于每种媒体类型，并从该配置提供文件。
这肯定比沿着动态导入路径做更多的工作，但它是可行的，并且可以按媒体类型完全隔离您的应用程序。
因为我们可以像下面这样导入样式表：
<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 配置？
这更像是评论，但我相信有一个插件：
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!
如果不进行动态导入，您将只能在编译时作为静态模块捆绑器使用 Webpack 执行的操作。因为您想要获得的行为在运行时是必需的，所以 Webpack 只能推断出您已经告诉它的有关环境的信息。
话虽如此，您可以创建 multiple build outputs 每个都针对特定平台进行配置。假设您的代码库中的唯一区别是您的 CSS，除了您的输出 CSS 之外的所有内容在每个构建配置中都应该相同。走这条路线意味着设置多条路线，一种用于每种媒体类型，并从该配置提供文件。
这肯定比沿着动态导入路径做更多的工作，但它是可行的，并且可以按媒体类型完全隔离您的应用程序。