什么是webpack?
webpack是JavaScript模块化编译的构建工具,在webpack中,一切均为模块,通过loader进行翻译转换文件,通过plugin进行注入钩子。它就像一个聪明的机器人一样,分析项目结构,找到javascript模块和一些浏览器不能直接处理的扩展语言(Less,Scss)统一进行打包成浏览器可阅读的格式。
Webpakck的优点是什么?
- 专注模块化构建项目
- 通过plugin可以灵活注入
- 开发场景灵活
webpack的构建流程是什么?
在这个过程中会进行一系列操作,为方便理解将会用购物的形式进行抽象化解释。
- 根据配置文件和XShell命令生辰Complier对象。(选中了喜欢的商品并且选择了你的码数和颜色)
- 从入口文件开始出发,根据Complier对象的配置,开始使用loader进行对代码的翻译,并对相关联的模块进行重复操作,记录他们的关联关系。(商家开始对你买的东西进行设计,准备设计稿)
- 根据入口文件和每个模块的关系,会生成一个个包含多个模块的Chunk,并加入到输出列表,在此刻是最后可以修改输出内容的最后环节。(商家把商品进行打包,根据相同的特点关系封装到每个箱子)
- 开始根据输出列表进行文件写入步骤,在写入的过程中,webpack会发布一些消息,插件可以根据这些消息通过API对打包结果进行最终设置。(商家发货,每个步骤都会在快递信息展示,到最后确认收货/货物丢失)