编译过程

编译过程

将源代码打包的过程。

大致分为三个过程

• 初始化
• 编译
• 输出

初始化

初始化阶段，由于我们使用的是 webpack-cli，当运行命令时，webpack 会将 webpack.config.js 中的配置，命令行配置，以及package.json 里面的配置合并成一个最终配置。

生成 chunk（块）

然后进入分析阶段

根据入口文件递归遍历文件

拿到模块文件 会先检查一下 chunk 中的模块记录，看是否存在于表中。

如果存在，则遍历下一个，如果不存在，则会读取文件中的内容，然后通过语法分析，将内容转换为 AST 抽象语法树。通过分析 AST 抽象语法树记录依赖。

然后将依赖保存到 dependencies 中，（dependencies中保存的是模块ID ‘./src/xxx.js’, 模块ID 的路径是从 src下开始的。类似于 denpendencies['./src/a.js','./src/b.js'] ）

接着会替换内容的 require 改为自定义名称 _webpack_require 。

保存转换后的模块代码，到chunk 的模块记录中

• 模块ID ：./src/index.js
• 转换后的代码：xxxxxx

然后根据 denpendencies 中的内容 递归加载模块。

生成 chunk assets

就是将我们生成的 chunk 列表，转换成编译后的资源：

• 文件名：./dist/main.js（一般与chunk 的 name 相同（默认是main 生产环境则是一串数字））
• 文件内容

同时会生成一个 chunk hash。

将文件内容联合起来，生成一个固定长度的 hash ，来识别内容是否改变。

这就是一个 bundle。

然后将所有的 chunk assets 融合起来，生成一个总的 chunk hash

输出

由于 webpack 运行在 node 环境，所以 可以通过 fs 模块，将生成的内容写入文件中；