使用create-react-app代码拆分分离CSS文件而不弹出

Question

由于我的应用程序变得太大而无法执行此操作，因此我使用react-loadable来利用代码分割。 这一切都有效，但CSS嵌入在这些新的JavaScript块中，然后看似动态地加载到页面中。 我希望每个块中的CSS都在单独的文件中，而不是在JS文件本身内。 我可以在不自行弹出和修改Webpack配置的情况下完成此操作吗？ 如果可能的话，我真的想避免这种情况。

编辑：我刚刚看到实际的Webpack配置正在做什么。 以下评论确认了我遇到的问题，但没有提供解决方案：

注意最后一句：

但是，如果使用代码拆分，任何异步包仍然会在异步代码中使用“样式”加载器，因此来自它们的CSS不会出现在主CSS文件中。

Answer 1

我不相信 ， create-react-app的目的是为项目的构建配置提供有用的默认值，以及为应用程序的项目结构提供基本模板 。 其主要思想是create-react-app将让您专注于构建您的应用程序，而不是担心设立各种构建配置，如Webpack捆绑资产， babel为transpiling JavaScript代码，掉毛等.. create-react-app对于大多数Web应用create-react-app是一个很棒的“千篇一律”解决方案，但它无法解决边缘情况，例如由于应用程序规模的增长而导致的自定义性能需求。 另一个类比是，它类似于制定或遵循饮食计划：您知道基本的复合运动，对于给定的一组/代表范围，以及在您的常量营养素需求中吃健康食品，将帮助您实现最佳体质可能....但是为了准备好舞台，这是5-10％的个人定制，这会使你赢得胜利的机会。 这就是为什么演员/女演员/运动员等等都有营养师，厨师和力量教练，这些教练可以个性化这个基本模板，以便在个人层面上取得成功。 回到你的问题，从它的声音，你需要修改MiniCssExtractPlugin从内插件设置webpack.config.js到大块的CSS适当纳入单独的文件。 也许你可以尝试以下方法：

1. 在Github，Bitbucket等版本控制系统上备份你的源代码......因为你肯定会在这个试错过程中打破这个问题。 然后从master分支出来，以免破坏你的主分支与一个工作的应用程序。

现在您可以尝试两种选择：

1. 您的所有构建配置设置都在您的webpack.config.js ，即使您使用create-react-app 。 由于此配置仅封装在react-scripts节点模块中 。 所以也许你可以尝试直接编辑这个文件而不弹出： <base_path>/node_modules/react-scripts/config/webpack.config.js虽然你需要小心不要破坏现有的配置设置。 至少这种方式如果你破坏了这个文件，你总是可以删除并重新安装react-scripts并返回初始配置。 这也允许您在“半安全”沙盒环境中使用自定义。
2. 拉起你的大男孩裤子弹出！ 虽然这并不是您想要听到的，但由于规模的原因，大多数人都不需要考虑自定义需求，因此这需要自定义配置。 类似于我之前给出的运动/饮食计划类比。 如果有任何保存优势，请记住create-react-app提供的不是魔法，而只是为构建配置创建有用的默认值。 通过弹出你仍然可以像以前一样使用该应用程序，但现在你正在自己前进，如果你没有使用create-react-app那么无论如何都是如此。

希望这对您有所帮助，祝您好运！ 如果你找到一个优雅的解决方案然后请与他人分享，我希望被证明是错误的:)

Answer 2

我想在这一点上我可以确认你用来创建项目的create-react-app版本是个问题。 这不是react-loadable的问题，它是动态的import()语法，并且在ExtractTextPlugin没有从该语法中找到块的支持。

我使用新的create-react-app在我的机器上进行了测试。 您可以看到在动态加载时创建了包。

以下是extract-text-webpack-plugin问题的链接。 此功能不会添加到此插件中（请参阅上次评论）： https ： //github.com/webpack-contrib/extract-text-webpack-plugin/issues/455

所以你现在需要做的是找到一种切换到MiniCssExtractPlugin ，如果你想提取那个CSS，我认为这是你唯一的选择。

编辑：面向未来的Google员工。 MiniCssExtractPlugin不支持Webpack 3，您需要完全升级到4。