(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:----有外掛，多餘樣式沒有被打包：
此節只是對如何使用這個外掛做了簡單的描述，更多其他的一些相關配置要求，需逐步深入。有什麼問題，歡迎留言！！