首先描述一下问题场景
一个项目中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 是一个术语,通常用于描述移除 JavaScrip