webpack笔记01


作者:朱培鑫

时间:2018-05-03

Webpack的诞生

webpack作者Tobias Koppers (github:@sokra)在从事Java开发的过程中,使用到Google的GWT后发现其中的代码分割功能很好用,但那时的前端打包工具都不具有这一个功能,他开始向这些打包工具提交pull request 但这些打包工具的作者并没有在意这个功能,因此Tobias Koppers自己开发了webpack这款打包工具。Instagram在注意到Tobias Koppers开发的早期webpack后,接受webpack的维护工作。

为什么需要构建

一. 开发分工变化
网站应用逐渐由前后端混合式开发,即使用php或jsp等等服务端脚本语言去套前端做好的模板,过渡到现在更多的则是前后端分离的开发模式,前端可以用来处理展示层的业务逻辑,后端同时也可以把重心放在数据库设计以及数据逻辑处理上,只需要提供给前端API接口即可。

二. 框架的变化
JS库 -> MVC -> MV*
前端库的时代,主要解决各浏览器之间的差异问题(兼容性问题)
代表Dojo,Yui,jQuery,prototype,Mootools,Kissy

MVC时代,这时有了前端路由和打包的雏形
代表 backbone.js,underscore.js 并借助jQuery操作DOM

MV*时代,前后端分离
代表Angular,React,Vue,模块化概念,并利用了ES6,ES2017,ES2018等新特性需要转化成浏览器可以解析的JavaScript代码

三. 语言的变化

20180503_101859.png

20180503_101922.png

20180503_102331.png

为了简化开发或者引入其他编程语言的思想,在前端开发语言基础之上出现了一批改良版的前端开发语言,但是这些语言往往不能直接在浏览器端运行,因此需要经过构建工具翻译成浏览器可以执行的语言。

四. 环境的变化

20180503_102636.png

20180503_102707.png

构建为了解决不同环境下的兼容性问题

五. 社区的变化

20180503_102825.png

通过npm引入的依赖包需要经过打包后才能发布到生产环境,因为依赖包数量很多,直接使用会产生巨多的HTTP请求,影响前端展现速度。

六. 工具的变化

20180503_103024.png

总结

为什么前端需要构建

  1. 开发复杂化
  2. 框架去中心化
  3. 语言编译化
  4. 开发模块化

为什么选用Webpack

  1. Vue-cli,React-starter,Angular-cli都在用
  2. Code-splitting
  3. 天生模块化

( 本篇完 )