webpack可以看成一个项目打包机，他会先将浏览器不能识别的格式如sass, less等转换成浏览器可识别的css共浏览器使用，在3.0之后webpack还加入了优化项目的责任
- 打包，可以把多个同类型文件压缩成一个文件，从而减少带宽压力
- 转换，通过loader把扩展语言转换成浏览器可以识别的文件类型
- 优化， 提升页面性能
常用的基本配置：
- entry项目入口，字符串或对象
- output项目出口，一个对象
- module, 模块的处理，loader在这里工作
- plugin， module不能做的在这里处理，比如去注释，图片压缩imagemin, 清空文件夹clean等
- devServer， 开启本地服务器
- devtool, 生成sourcemap文件等
- watch， 持续监听文件变化 reload
常用配置：
- commonsChunkPlugin, 分离第三方包，减小打包体积。原理是提取出被重复引用的第三方文件，单独打包，可以避免在多个入口重复打包
- 小图片优化 url-loader, 将小图转化成base64，防止小图太多需要多次请求。
Tree Shaking
在ES6的import中，当我们引入一整个文件时很可能真正需要的只是其中的几个方法，那么有没有办法去除冗余的代码吗？ 答案就是tree shaking
首先明确一下tree-shaking是不支持动态导入的(require)，只能是用静态导入的import
他的原理是先标记出模块导出值中哪些没有被用过，再删掉这些没被用过的导出语句