dejavu00 / fed-e-task-02-02

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

邓力 | Part 1 | 模块二

简答题

此处回答简答题的内容。每一题为一个三级标题,可以后面跟上题目,也可以不跟,下面为格式示例:

第一题

  1 初始化参数:解析webpack配置参数,合并shell传入和webpack.config.js文件配置的参数,形成最后的配置结果;

  2 开始编译:上一步得到的参数初始化compiler对象,注册所有配置的插件,插件监听webpack构建生命周期的事件节点,做出相应的反应,执行对象的 run 方法开始执行编译;

  3 确定入口:从配置的entry入口,开始解析文件构建AST语法树,找出依赖,递归下去;

  4 编译模块:递归中根据文件类型和loader配置,调用所有配置的loader对文件进行转换,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理;

  5 完成模块编译并输出:递归完事后,得到每个文件结果,包含每个模块以及他们之间的依赖关系,根据entry或分包配置生成代码块chunk;

  6 输出完成:输出所有的chunk到文件系统 

第二题

  loader负责资源文件从输入到输出的转换,专注实现资源文件的加载,plugin解决除了资源加载以外的其他自动化工作,如清除上一次打包dist文件,静态文件的拷贝到输出目录,压缩打包结果的输出代码。
  loader类似管道,每次资源处理结果交给下次处理,最后生成对应js,plugin是通过往webpack生命周期钩子中挂载函数实现扩展。

About


Languages

Language:JavaScript 45.8%Language:Vue 42.8%Language:HTML 10.4%Language:CSS 1.0%