使用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。