Webpack相关原理浅析

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

打包过程可以拆分为四步:

1、利用babel完成代码转换,并生成单个文件的依赖

2、从入口开始递归分析,并生成依赖图谱

3、将各个引用模块打包为一个立即执行函数

4、将最终的bundle文件写入bundle.js中

 

小解读:

1.1 利用@babel/parser解析代码,识别module

1.2 利用@babel/traverse遍历AST,获取通过import引入的模块并保存所依赖的模块

1.3 通过@babel/core和@babel/preset-env进行代码的转换,就是转化ES6/7/8代码等

1.4 输出单个文件的依赖

return{ filename,//该文件名 dependencies,//该文件所依赖的模块集合(键值对存储) code//转换后的代码 }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wspwxs.html