2019-6-1 webpack打包原理理解

这两天看webpack高级教程,有模拟webpack实现webpack的功能,感觉有点吃不透;但是看了一些文字大体知道了怎么回事;

市面上好的文章不多,找到了一个看得懂的;所以在这里加一个引用;

https://segmentfault.com/a/1190000013610635

 

总结:

1.webpack 用递归处理依赖

2.webpack根据入口文件开始提取require指令,并且把所有的依赖,放到对象中,然后递归找依赖的指令;

3.webpack最终调用的是一个闭包函数,而且,依赖也被解析成了闭包函数,所以webpack_require_方法调用时,就是调用闭包函数.立即执行;

4.分析语法时用到了AST语法分析韩式, AST-->提取依赖-->改变AST函数名称-->webpack根据配置的rules,用不同的loader处理代码,然后返回代码;

5.webpackloader 是一个函数,传入js代码,然后在方法中修改js代码,并返回修改后的代码;