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

Question

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

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

注意最后一句话：

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

Answer 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，这是你目前唯一的选择。

编辑：对于未来的谷歌人。MiniCssExtractPlugin不支持Webpack 3，您需要完全升级到4。