html清理多余样式,webpack去除冗余css样式删除多余css webpack打包css时，⼀般时压缩css，但css有很多⽤不到类和属性，有什么办法可以除冗余css样式删除多余css，特别是在使⽤⼀些bootstrap的前端框架时，可使⽤purifycss和PurifyCSS-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对象使⽤。在fig.js⽂件头部引⼊glob。
const glob = require('glob');
(2)引⼊purifycss-webpack
同样在fig.js⽂件头部引⼊purifycss-webpack。
const PurifyCSSPlugin = require("purifycss-webpack");
1.3 配置plugins
引⼊完成后我们需要在fig.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;
webpack打包流程 面试text-align: center;}
1.5 打包
此处打包分为两种情况：⼀是使⽤了插件配置后的打包，另⼀个是未使⽤插件配置的打包(删除或注释plugins中的PurifyCSSPlugin配置)，主要是对⽐有⽆插件的打包情况。
使⽤webpack命令进⾏打包
webpack
结果1-----⽆插件样式都被打包了：
结果2:----有插件，多余样式没有被打包：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。