记一次webapck打包

沉着冷静爱吃板栗
70 阅读1分钟

webpack打包三大流程

image.png

主要分为三个阶段:

  • babel将ES6格式的代码转义成AST树+解析出文件之间的依赖+编译成通俗易懂ES5代码
  • 根据第一步解析出来的文件的依赖，给依赖添加key，让bundle的时候能够更加快速的找到代码快
  • 结合一二步的解析结果创建可在浏览器执行的函数，主要是由 require，module，exports三个参数组成

GetAssets阶段:

image.png

Graph阶段：

image.png

CreateBundle阶段：

image.png

avatar
文章
阅读
粉丝