在平時(shí)的項(xiàng)目開發(fā)中，我們會(huì)引入一些框架，比如：Bootstrap，但是在項(xiàng)目中通常我們只使用它的一小部分，還有部分是冗余的。更有甚有時(shí)候需求更改，帶來DOM結(jié)構(gòu)的更改，這時(shí)候我們可能無暇關(guān)注CSS樣式，會(huì)造成很多冗余的CSS。我們得想辦法消除冗余的CSS,如果靠人工去剔除，吃力又容易出錯(cuò),因此，此節(jié)我們來學(xué)習(xí)一下用webpack如何消除未使用的CSS。
PurifyCSS
使用PurifyCSS可以大大減少CSS冗余,消除框架中未使用的CSS,初步達(dá)到按需引入的效果。
1.如何在webpack中使用？
1.1 安裝
安裝PurifyCSS-webpack插件，PurifyCSS-webpack是依賴于purify-css這個(gè)包的，所以這兩個(gè)都需要安裝。這里采用npm安裝（也可采用cnpm安裝）
npm i -D purifycss-webpack purify-css
D:是–save-dev的一個(gè)簡寫。
1.2 引入
(1)因?yàn)槲覀冃枰綑z查html模板，所以我們需要引入node的glob對(duì)象使用。在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')),
})
]
這里配置了一個(gè)paths，主要是需找html模板，purifycss根據(jù)這個(gè)配置會(huì)遍歷你的文件，查找哪些css被使用了。
注意：使用這個(gè)插件必須配合
extract-text-webpack-plugin這個(gè)插件且extract-text-webpack-plugin插件必須在purifycss-webpack之前引入，extract-text-webpack-plugin插件相關(guān)知識(shí)點(diǎn)前面已經(jīng)說過了。
1.4 編寫css代碼
配置好上邊的代碼，我們可以故意在src/css/index.css文件里寫一些用不到的屬性，比如：
#hello{
background-color: #018eea;
color: red;
font-size: 32px;
text-align: center;
}
1.5 打包
此處打包分為兩種情況：一是使用了插件配置后的打包，另一個(gè)是未使用插件配置的打包（刪除或注釋plugins中的PurifyCSSPlugin配置）,主要是對(duì)比有無插件的打包情況。
使用webpack命令進(jìn)行打包。
webpack
結(jié)果1-----無插件樣式都被打包了：
結(jié)果2:----有插件，多余樣式?jīng)]有被打包：
此節(jié)只是對(duì)如何使用這個(gè)插件做了簡單的描述，更多其他的一些相關(guān)配置要求，需逐步深入。有什么問題，歡迎留言?。?/p>
