由于我的应用程序太大,我无法使用react-loadable
来进行代码拆分。一切正常,但是CSS嵌入了这些新的JavaScript块中,然后似乎动态地加载到了页面中。我希望每个块中的CSS都位于单独的文件中,而不是放在JS文件本身中。我可以在不退出和修改Webpack配置的情况下完成此操作吗?如果可能的话,我真的很想避免。
编辑: 我只是弹出来查看实际的Webpack配置在做什么。以下评论确认了我遇到的问题,但没有提供解决方案:
注意最后一句话:
但是,如果您使用代码拆分,则任何异步捆绑包仍将使用 异步代码中的“样式”加载程序,因此来自它们的CSS不会位于 主CSS文件。
答案 0 :(得分:2)
我不相信,create-react-app
的目的是为您的项目的构建配置提供有用的默认值,并提供一个应用程序项目结构的基本模板。主要思想是,create-react-app
可使您专注于构建应用程序,而不必担心设置各种构建配置,例如Webpack
用于捆绑资产,babel
用于转译JavaScript。代码,整理等... create-react-app
是适用于大多数Web应用程序的一种出色的“千篇一律”解决方案,但是由于应用程序规模的增长,它无法解决一些极端情况,例如自定义性能需求。另一个比喻是,它类似于制定或遵循饮食计划:您知道在给定的设定/ rep范围内基本的复合运动以及在满足大量营养素需求的情况下食用健康食品将帮助您达到最佳体质可能....但要做好准备,只有5-10%的个人定制决定了成败机会的可能性。这就是演员/女演员/运动员等都拥有营养师,厨师和力量教练的原因,这些人可以根据个人水平成功地个性化此基本模板。回到问题所在,您需要从MiniCssExtractPlugin
内修改webpack.config.js
插件设置,以将CSS
适当地分块到各个文件中。也许您可以尝试以下方法:
现在,您可以尝试两种选择:
webpack.config.js
内,即使您使用create-react-app
也是如此。由于此配置仅封装在react-scripts
节点模块中。因此,也许您可以尝试直接编辑此文件,而不会弹出:<base_path>/node_modules/react-scripts/config/webpack.config.js
,尽管您需要注意不要破坏现有的配置设置。至少以这种方式,如果您破坏了该文件,则始终可以删除并重新安装react-scripts
并返回到初始配置。这也使您可以在“半安全”沙盒环境中进行自定义。create-react-app
没有提供任何魔术,而只是为您的构建配置提供了有用的默认值。通过弹出,您仍然可以像以前一样使用该应用程序,但是现在您可以继续前进了,如果您不使用create-react-app
,无论如何都会如此。希望对您有帮助,祝您好运!如果您想出一个优雅的解决方案,请与他人分享,希望能证明是错误的:)
答案 1 :(得分:1)
我想在这一点上我可以确认这是您用于创建项目的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。