本次课程的代码目录(如下图所示)：
什么是tree-shaking
webpack 2 的到来带来的最棒的新特性之一就是tree-shaking 。tree-shaking源自于rollup.js，先如今，webpack 2也有类似的做法。
webpack 里的tree-shaking的到来不得不归功于es6规范的模块。为什么这么说，如今的前端模块规范很多，比较出流行的比如commonJS,AMD,es6 ，我简单的说一下commonJS和es6模块的区别。
1. CSS 也有 Tree Shaking？
是滴，随着 webpack 的兴起，css 也可以进行 Tree Shaking： 以去除项目代码中用不到的 CSS 样式，仅保留被使用的样式代码。
为了方便理解 Tree Shaking 概念，并且与 JS Tree Shaking 进行横向比较，请查看：webpack4 系列教程(八): JS Tree Shaking
2. 项目环境仿真
因为 CSS Tree Shaking 并不像 JS Tree Shaking 那样方便理解，所以首先要先模拟一个真实的项目环境，来体现 CSS 的 Tree Shaking 的配置和效果。
我们首先编写 /src/css/base.css 样式文件，在文件中，我们编写了 3 个样式类。但在代码中，我们只会使用 .Box 和 .Box--big 这两个类。代码如下所示：
height: 200px;
width: 200px;
border-radius: 3px;
background: green;
}
.Box--big {
height: 300px;
width: 300px;
border-radius: 5px;
background: red;
}
.Box-small {
height: 100px;
width: 100px;
border-radius: 2px;
background: yellow;
}
按照正常使用习惯，DOM 操作来实现样式的添加和卸载，是一贯技术手段。所以，入口文件 /src/app.js 中创建了一个
