本质上,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//转换后的代码 }