为什么使用 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?