本课程代码目录(如下图所示):

什么是摇树

摇树是webpack 2到来带来的最好的新功能之一。摇树起源于rollup.js现在，webpack 2也有类似的做法。

webpack中摇树的出现必须归功于es6规范的模块。为什么这么说？现在前端模块的规格很多，比较热门的模块比如commonJS、AMD、es6。我将简要谈谈commonJS和es6模块之间的区别。

1.CSS也有摇树？

是的，随着webpack的兴起，css也可以是Tree Shaking:去掉项目代码中没有用到的CSS样式，只保留使用过的样式代码。

为了方便理解摇树的概念并与JS摇树进行横向比较，请查看：webpack4系列教程(8) : JS摇树

2.项目环境模拟

因为CSS抖树不像JS抖树那么容易理解，所以我们首先要模拟一个真实的项目环境来反映CSS抖树的配置和效果。

首先，我们编写/src/css/base.css样式文件，其中我们编写了三个样式类。但是在代码中，我们只使用。盒子和。包厢大班。代码如下：

/* base . CSS */html { background : red；}.box { height: 200px宽度： 200 px；border-radius : 3px；背景：绿色；}.box-big { height : 300 px；宽度： 300 px；border-radius : 5px；背景：红色；}.box-small { height : 100 px；宽度： 100 px；border-radius : 2px；背景：黄色；}按照正常的使用习惯，DOM操作是一种一致的添加和卸载样式的技术手段。因此，在条目文件/src/app.js中创建了一个div标记，它的类被设置为. box。

//app.jsimport基自“”。/CSS/base . CSS '；var app=document . getelementbyid(' app ')；var div=document . create element(' div ')；div.className=' boxapp . appendchild(div)；最后，为了让环境更接近实际环境，我们在index.html的标签也是指定义好的box-big style类。

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' link rel='样式表' href='。/dist/app . min . CSS ' rel=' external no follow ' title document/title/head body div id=' app ' div class=' box-big '/div/div script src=' http :/dist/App。bundle . js '/script/body/html根据我们的模拟环境，Tree Shaking之后的最终效果应该是打包的css文件不包含box-small style类。下面，我们就来达到这个效果！

3.了解PurifyCSS

没错，就是这个产品帮助我们进行CSS树摇。它还有一个好朋友glob-all(另一个第三方库)，以便准确指示要进行树摇的CSS文件。

glob-all的功能是帮助PurifyCSS处理路径并定位路径文件为树摇动。

两者搭配在一起，画风如下：

const PurifyCSS=require(' PurifyCSS-web pack ')；const glob=require(' glob-all ')；让purify CSS=new purify CSS({ path s : glob . sync([//path file path . resolve(_ _ dirname，')。/* .html ')、path . resolve(_ dirname ')。/src/*。js')]。好吧，这只是一个小演示。接下来，我们将在我们的webpack.config.js中使用它

4.编写配置文件

配置中还使用了extract-text-webpack-plugin，以便于最后检查打包的css文件。如果您忘记了它的用法，请检查：

Webpack4系列教程(6) :处理CSS

因此，我们的package.json文件如下：

{“开发依赖项”: {“CSS加载器”: '^1.0.0',"extract-text-web包插件“: '^4.0.0-beta.0',"glob-all": '^3.1.0',"purify-css": '^1.2.5',"purifycss-web包”: '^0.7.0',"style-loader": '^0.21.0',"web包“: '^4.16.0' } }安装完相关插件后，我们需要在工具的插件配置中引用第三部分定义的代码。

然后结合提取-文本-网络包-插件的配置，编写如下webpack.config.js:

//web pack。配置。jsconst path=require(' path ')；const PurifyCSS=require(' PurifyCSS-web pack ')；const glob=require(' glob-all ')；const ext plugin=require(' ext-text-web pack-plugin ')；让ext plugin=new ext plugin({ filename : '[name])。量滴CSS '，所有组块s 3360 false })；让purifyCSS=new purifyCSS({ path s : glob。同步([//要做半铸钢钢性铸铁(Cast Semi-Steel)树摇动的路径文件path.resolve(__dirname，' ./*.html ')，//请注意，我们同样需要对超文本标记语言文件进行树摇动路径。解析(__dirname，' ./src/* .js ')])})；模块。导出={ entry : { app : } ./src/app.js' }，输出： {公共路径： _ _ dirname '/dist/'，路径： path。解析(_ dirname，' dist ')，文件名： '[name].bundle.js '，区块文件名： '[name].大块。js ' }，模块： {规则s 3360[{ test :/ .css$/，使用： extract textplugin。extract({ fallback : { loader : ' style-loader '，options : { single type : true } }，use : { loader : ' CSS-loader '，options : { minimum : true } })} } } })，plugins :[extract plugin，purify CSS]}；5.结果分析

命令行运行工具打包后，样式文件被抽离到了/dist/app.min.css文件中。文件内容如下图所示（肯定好多朋友懒得手动打包):

我们在index.html和src/app.js中引用的样式都被打包了，而没有被使用的样式类-盒子-小，就没有出现在图片中。成功！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。