此博客是本人从学生时代开始做笔记所用, 部分是工作所遇问题,做填坑笔记,部分闲来查阅资料,加上自己的理解所总结的学习笔记, 常忙得不可开交,若漏了资料来源,望通知~ 前路漫漫,写点东西告诉自己正在一点点进步,而不要迷失于繁忙。

webpack打包笔记

optimist是一个node库,将webpack.config.js与shell参数整合成options对象

options对象包含之后构建的重要信息,类似于webpack.config.js

webpack初始化: 构建compiler对象;初始化基本插件,把options对应的选项进行require

compiler具体分为两个对象: compiler存放输入输出相关配置信息和编译器parser对象; watching: 监听文件变化

run 编译的入口方法

compile 由run触发,构建compilation对象

compilation负责整个编译过程,将存放modules、chunks生成的assets以及用来生成js的template,

包含打包重要的方法

addEntry 找到入口js文件

addModleChain 根据模板类型创建模块

addDependency 模块有多个依赖模块,通过此方法添加到依赖模块数组中

buildModule 创建模块添加到compilation对象上

(创建模块包括调用loader处理源文件,使用acron生成AST并遍历,遇见require等依赖时,添加到依赖数组)

seal 构建后的结果(即module与chunk)进行封装,生成hash

createChunkAsset 开始处理生成打包后的js文件

MainTemplate.render 处理入口文件的module

ChunkTemplate.render 处理非首屏,需异步加载的module,例如import异步导入的module

ModuleTemplate 对所有的模块进行一个代码生成

module.source 将module循环添加到source,一个source对应一个asset

compiler.emitAsset 生成最终js并输出到output的path

tapable: 贯穿整个webpack,是实现插件绑定与调用的库

posted @ 2017-11-30 16:42  炎泽  阅读(396)  评论(0)    收藏  举报