webpack是怎么打包的?babel是什么?

webpack把项目当做一个整体, 通过设定的入口文件, 从该文件开始找到项目的所有依赖文件, 使用loaders处理它们, 最终打包成一个或多个js文件.

webpack的主要功能在于, 读取文件 --> 转换成抽象语法树(AST) --> 保存生成转化后的代码.

loaders的作用时间点, 是在读取文件之后, 转换成抽象语法树之前. loader的本质就是一个函数, 它将一个源码字符串转换成另外的字符串返回. 多个loader调用的顺序从后往前.

webpack在初始化, 编译, 输出阶段都有大量的钩子函数, 通过调用可以使我们参与到编译之中. plugin的本质是一个带有apply方法的对象, apply方法在webpack完成初始化, 创建好compiler对象后调用, 传入的参数就是compiler. compiler对象提供了大量的钩子函数(hooks, 可以理解为事件), plugin的开发者可以注册这些钩子函数, 参与webpack编译和文件生成输出.

babel是将较新版本的js, 转化成大多数浏览器都可识别的老版本的语法的工具.