为什么使用 webpack ？
最近十年，随着手机、移动平板和可穿戴设备的迅速普及，前端的应用场景得到了迅速的扩张，相对应开发方式也可谓“百花齐放”。所以，针对不同的应用场景做不同的打包就显得十分重要。比如，针对 PC 端的中后台应用，需要支持 SPA 的打包构建；而 H5 页面通常对性能和可访问性有着极高的要求，因此需要通过构建来支持服务端渲染和 PWA 离线缓存。
再加上如今 Node.js 社区的异常繁荣（ npm 的模块数量已上升至 100w+），而浏览器端的 JS 代码中并不能直接引入 npm 模版，需要借助 webpack 这样的构建工具，让我们可以快速“食用”那些优秀成熟的组件，从而提高前端开发效率。
最后，React 和 Vue 的一些语法（如 JSX、Vuex 等）在浏览器中是无法直接解析的，也需要构建工具进行转换。
所以，无论走哪条前端路线，都绕不开对构建工具的掌握，而 webpack 则是当下构建工具中代表之作。
webpack 可以干什么？
从最基础/刚需的作用来看：
- 转换 ES6 语法
- 转换框架中的语法糖（比如，JSX 语法）
- CSS 前缀补全/预处理（scss），提高可编程性
- 压缩混淆
- 图片压缩
构建工具演变历程
- 最早的前端开发，就是切图+HTML+CSS+JS，最开始的代码压缩是需要通过一些在线工具进行手动压缩，这个过程就很繁琐了；
- 后来，随着模块化的风越刮越大，grunt 也是应运而生，由于 grunt 对本地磁盘的 I/O 操作，所以打包速度会非常的慢；
- 由此又演变出了 gulp，gulp 利用文件流的概念，将中间产物存放在内存中，需要时从内存中直接读取，从而提高了打包速度；
- 为什么最终选择了 webpack？
