webpack指南-webpack介紹-代碼分割 - CSS

要使用webpack打包CSS，像其他任一子產品一樣将CSS代碼導入到你的JS代碼中，然後使用css-loader（将CSS輸出為JS子產品），再選擇性地使用ExtrackTextWebpackPlugin（提取打包的CSS并輸出CSS檔案）。

就像導入JS子產品一樣導入CSS檔案，例如vendor.js所示：

在webpack.config.js中如下圖所示配置css-loader:

結果是，CSS和JS打包在一起。

這種方式有一個缺點，就是你無法利用浏覽器異步并行加載CSS的能力。取而代之的是，頁面需要等待整個JS包加載完畢來加載樣式。

webpack可以通過使用ExtrackTextWebpackPlugin分别地打包CSS來解決這個問題。

使用ExtrackTextWebpackPlugin

安裝ExtrackTextWebpackPlugin

npm i --save-dev extract-text-webpack-plugin

使用這個插件需要在webpack.config.js中進行兩步操作：

完成後，你就可以為所有CSS子產品生成新的包并在index.html中用不同的tag引入他們。

。