在平時的項目開發中，我們會引入一些框架，比如：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:----有插件，多余樣式沒有被打包：
此節只是對如何使用這個插件做了簡單的描述，更多其他的一些相關配置要求，需逐步深入。有什么問題，歡迎留言！！