(14/24) css進階：（入門）去除冗餘的css
在平時的專案開發中，我們會引入一些框架，比如：Bootstrap，但是在專案中通常我們只使用它的一小部分，還有部分是冗餘的。更有甚有時候需求更改，帶來DOM結構的更改，這時候我們可能無暇關注CSS樣式，會造成很多冗餘的CSS。我們得想辦法消除冗餘的CSS,如果靠人工去剔除，吃力又容易出錯,因此，此節我們來學習一下用webpack如何消除未使用的CSS。
PurifyCSS
使用PurifyCSS可以大大減少CSS冗餘,消除框架中未使用的CSS,初步達到按需引入的效果。
1.如何在webpack中使用？
1.1 安裝
安裝PurifyCSS-webpack外掛，PurifyCSS-webpack
purify-css這個包的，所以這兩個都需要安裝。這裡採用npm安裝（也可採用cnpm安裝）
npm i -D purifycss-webpack purify-css-D:是–save-dev的一個簡寫。
1.2 引入
(1)因為我們需要同步檢查html模板，所以我們需要引入node的glob物件使用。在webpack.config.js檔案頭部引入glob。
const glob = require('glob');
(2)引入purifycss-webpack
同樣在webpack.config.js檔案頭部引入purifycss-webpack。
const PurifyCSSPlugin = require("purifycss-webpack");
1.3 配置plugins
引入完成後我們需要在webpack.config.js裡配置plugins。程式碼如下
plugins:[
new extractTextPlugin("css/index.css"),
new PurifyCSSPlugin({
// Give paths to parse for rules. These should be absolute!
paths: glob.sync(path.join(__dirname, 'src/*.html')),
})
]這裡配置了一個paths，主要是需找html模板，purifycss
css被使用了。
注意：使用這個外掛必須配合
extract-text-webpack-plugin這個外掛且extract-text-webpack-plugin外掛必須在purifycss-webpack之前引入，extract-text-webpack-plugin外掛相關知識點前面已經說過了。
1.4 編寫css程式碼
配置好上邊的程式碼，我們可以故意在src/css/index.css檔案裡寫一些用不到的屬性，比如：
#hello{
background-color: #018eea;
color: red;
font-size: 32px;
text-align: center;
}
1.5 打包
此處打包分為兩種情況：一是使用了外掛配置後的打包，另一個是未使用外掛配置的打包（刪除或註釋plugins中的PurifyCSSPlugin配置）,主要是對比有無外掛的打包情況。
使用webpack命令進行打包
webpack結果1-----無外掛樣式都被打包了：
結果2:----有外掛，多餘樣式沒有被打包：
此節只是對如何使用這個外掛做了簡單的描述，更多其他的一些相關配置要求，需逐步深入。有什麼問題，歡迎留言！！