webpack tree shaking 踩坑

首先描述一下问题场景

一个项目中webpack升级到4.x.x版本后在development模式下项目是完全正常工作的，但是在production模式下没有把antd的css文件打包进去。
项目中webpack和antd的版本如下：

antd:3.4.5
webpack:4.27.0

项目中我们是这样引入antd的样式文件的：

import 'antd/dist/antd.css';

经过一番查找排查我们发现如果我们在项目中这样引入样式文件项目无论在webpack的develepment或者production模式下都能够正常运行：

1. require('antd/dist/antd.css');

或

2. @import '~antd/dist/antd.css';

或

3. 使用babel-plugin-import按需加载

或

4. import 'antd/lib/style/index.css';
   import 'antd/lib/style/components.css';

最终我们发现原来这一切都是webpack tree shaking惹的祸，所谓tree shaking可以这样解释：

tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)

而webpack4正式版本之后扩展这个检测能力，在production模式