第十二节、css进阶：消除未使用的css

相信有很多人都用过Bootstrap这个框架，我们在使用的时候每个页面只使用了其中一小部分的css样式，对着项目的推进，css代码会越来越多，有些是你自己写的，有的是你直接使用框架定义好的，到后期进行需求更改的时候我们可能就无暇关注css样式，造成很多css的冗余。这节内容就来学士使用webpack来消除未使用的css。

purifycss

---

安装purifycss-webpack，这是一个插件，不是loader。这里要安装两个包 purifycss-webpack 和 purify-css

npm install purifycss-webpack purify-css  --save-dev

引入glob

因为我们需要同步检查html模板，所以我们需要引入node的glob对象使用。在webpack.config.js文件头部引入glob。

const glob = require('glob');

引入purifycss-webpack

插件的使用方法在之前讲过，首先在头部引入purifycss-webpack

const purifyCssPlugin = require('purifycss-webpack');

配置plugins

plugins:[
    new uglify(),
    new htmlPlugin({
        minify:{
            removeAttributeQuotes:true
        },
        hash:true,
        template:'./src/index.html'
    }),
    new extractTextPlugin("/css/index.css"),
    new purifyCssPlugin({
        paths:glob.sync(path.join(__dirname,'src/*.html')),
    })
],

这里配置了paths，主要是需找html模板，pruifycss会根据这个配置会遍历你的文件，查找哪些css被使用了。

注意：使用这个插件必须配合extract-text-webpack-plugin这个插件，这个插件在前边的课程已经讲解过了。

配置好上边的代码，我们可以故意在css文件里写一些用不到的属性，然后用webpack打包，你会发现没用的CSS已经自动给你删除掉了。在工作中记得一定要配置这个plugins，因为这决定你代码的质量，非常有用