有沒有一種在生產中添加Webpack生成樣式表的實用方法

Question

我正在用webpack構建一個普通的App（JQuery，ES6等），它是通常的裝載器。我碰到以下情況：

• 在開發中，我希望使用style-loader，讓我的css放在一個內聯標記中。
• 在製作中，我想要一個縮小的css-bundle-file（dam，一個字），我可以稍後緩存並避免FOUC。我正在使用着名的Extract Text Plugin。

的問題是，當我在生產我將需要添加一個 <link href="some-bundle.css" />我index.html。好。但是通過這樣做，回到開發階段，我每次都會得到404，因爲我的CSS不是來自任何外部源（它來自JS，它是內聯的東西）。 如果我不添加鏈接標記，我永遠不會得到編譯的樣式表。

那麼，你如何做到這一點？是否有任何裝載程序在生產中自動添加<link>？或者您稍後手動添加它？

感謝，[]中

Answer 1

你可以使用HTML Webpack Plugin來生成基於您的WebPack版本（開發/生產）的index.html文件。其中一個會包含link標記，另一個則不會。