在平時(shí)的項(xiàng)目開(kāi)發(fā)中梦染，我們會(huì)引入一些框架，比如：Bootstrap猜憎，但是在項(xiàng)目中通常我們只使用它的一小部分娩怎，還有部分是冗余的。更有甚有時(shí)候需求更改胰柑，帶來(lái)DOM結(jié)構(gòu)的更改截亦，這時(shí)候我們可能無(wú)暇關(guān)注CSS樣式，會(huì)造成很多冗余的CSS柬讨。我們得想辦法消除冗余的CSS,如果靠人工去剔除崩瓤，吃力又容易出錯(cuò),因此，此節(jié)我們來(lái)學(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è)簡(jiǎn)寫(xiě)辩越。
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)說(shuō)過(guò)了。
1.4 編寫(xiě)css代碼
配置好上邊的代碼栅哀，我們可以故意在src/css/index.css文件里寫(xiě)一些用不到的屬性震肮，比如：
#hello{
background-color: #018eea;
color: red;
font-size: 32px;
text-align: center;
}
1.5 打包
此處打包分為兩種情況：一是使用了插件配置后的打包，另一個(gè)是未使用插件配置的打包（刪除或注釋plugins中的PurifyCSSPlugin配置）,主要是對(duì)比有無(wú)插件的打包情況留拾。
使用webpack命令進(jìn)行打包戳晌。
webpack
結(jié)果1-----無(wú)插件樣式都被打包了：
結(jié)果2:----有插件，多余樣式?jīng)]有被打包：
此節(jié)只是對(duì)如何使用這個(gè)插件做了簡(jiǎn)單的描述痴柔，更多其他的一些相關(guān)配置要求沦偎，需逐步深入。有什么問(wèn)題，歡迎留言：篮俊搔驼！
