webpack 完全指南:前言

515 阅读2分钟

为什么使用 webpack ?

最近十年,随着手机、移动平板和可穿戴设备的迅速普及,前端的应用场景得到了迅速的扩张,相对应开发方式也可谓“百花齐放”。所以,针对不同的应用场景做不同的打包就显得十分重要。比如,针对 PC 端的中后台应用,需要支持 SPA 的打包构建;而 H5 页面通常对性能和可访问性有着极高的要求,因此需要通过构建来支持服务端渲染和 PWA 离线缓存。

再加上如今 Node.js 社区的异常繁荣( npm 的模块数量已上升至 100w+),而浏览器端的 JS 代码中并不能直接引入 npm 模版,需要借助 webpack 这样的构建工具,让我们可以快速“食用”那些优秀成熟的组件,从而提高前端开发效率。

最后,React 和 Vue 的一些语法(如 JSX、Vuex 等)在浏览器中是无法直接解析的,也需要构建工具进行转换。

所以,无论走哪条前端路线,都绕不开对构建工具的掌握,而 webpack 则是当下构建工具中代表之作。

webpack 可以干什么?

01.png

从最基础/刚需的作用来看:

  • 转换 ES6 语法
  • 转换框架中的语法糖(比如,JSX 语法)
  • CSS 前缀补全/预处理(scss),提高可编程性
  • 压缩混淆
  • 图片压缩

构建工具演变历程

01.png

  • 最早的前端开发,就是切图+HTML+CSS+JS,最开始的代码压缩是需要通过一些在线工具进行手动压缩,这个过程就很繁琐了;
  • 后来,随着模块化的风越刮越大,grunt 也是应运而生,由于 grunt 对本地磁盘的 I/O 操作,所以打包速度会非常的慢;
  • 由此又演变出了 gulp,gulp 利用文件流的概念,将中间产物存放在内存中,需要时从内存中直接读取,从而提高了打包速度;
  • 为什么最终选择了 webpack?
    • 社区更活跃,生态更丰富
    • 配置灵活,插件化扩展(loaders & plugins
    • 官方持续更新,迭代速度快

webpack 系列