相信有很多人都用过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,因为这决定你代码的质量,非常有用