webpack(7)_CSS_使用purifycss-webpack来实现Tree Shaking

本文主要讲解使用purifycss-webpack来实现css的Tree Shaking，Tree Shaking意思是摇树，即为将项目中没有用到的css代码或js代码过滤掉，不将其打包到文件中，本章知识结构：

• 项目准备
• 使用purifycss
• 功能测试

项目准备

1、使用css-loader和style-loader
不了解的请先查看文章：https://blog.csdn.net/u010982507/article/details/81277151
2、使用extract-text-webpack-plugin
不了解的请先查看文章：https://blog.csdn.net/u010982507/article/details/81337529
3、使用postcss-cssnext
不了解的请先查看文章：https://blog.csdn.net/u010982507/article/details/81412335

使用purifycss

1、安装purify-css

npm install purify-css --save-dev

2、安装purifycss-webpack

npm install purifycss-webpack --save-dev

3、安装glob-all

glob-all用于处理多路径文件，使用purifycss的时候要用到glob.sync方法。
npm install glob-all --save-dev

4、配置webpack.config.js

• 引入purifycss-webpack和glob-all

var PurifyCss = require('purifycss-webpack');
var glob = require('glob-all');