webpack 原理

webpack 是什么

webpack 是一个打包工具，将浏览器无法识别的 Commonjs 等模块化语法（ module.exports、require 等）转化成能在浏览器运行。

实现的方式：

实现了一个 __webpack_require__ 方法，该方法根据 modulesId (模块路径及名称组合成),从 modules 对象 ( key 是 moduleId ，value 是 源文件内容经过转化成的函数) 中取模块并执行，并将结果存在installModules中。

通过递归从modules中获取执行结果，实现require的效果。

打包的过程

根据 webpack.config.js 找到 entry 入口文件

实现 compiler 类，该类做了以下事情：

1. 从入口开始解析、修改文件，得到 modules（依赖关系）
2. 生成目标 js 文件。

解析文件得到 modules

1. 解析当前文件，转化当前文件得到转化后的源码（webpack中为转化了模块引入方法的可执行函数），并得到当前文件的依赖项 dependencies
2. 保存转化后的源码和由文件名及文件路径合成的文件ID
3. 根据 dependencies 递归执行过程 1

过程 1 中，用到了babel：

1. 使用 babylon 解析源码得到 AST
2. 通过 @babel/traverse 遍历并访问 AST ，修改 AST 对象（ require -> __webpack_require__ ）,require 路径改成相对于根目录的路径 moduleName, 保存引入的 modulename 到 dependencies
3. 使用 @babel/generator 将修改后的 AST 对象逆生成源码
4. 返回源码和dependencies