共计 1352 个字符，预计需要花费 4 分钟才能阅读完成。
webpack 和 webpack-cli 是 npm 包，运行于 node 环境，执行打包操作时会执行：
- window 环境下，执行 yarn webpack 理论查找了 node_modules/.bin/webpack.cmd 文件并执行
- webpack.cmd 内依据装置的 cli（两种 webpack-cli，webpack-command），实现不同解决逻辑。
- 咱们装置了 webpack-cli，因而依据代码 require 了 node_modules/webpack-cli/package.json 中的 bin 入口文件，也就是 ./bin/cli.js
-
cli.js 是个 cli 执行命令行，外部是 IIFE 函数
- 函数次要作用解决用户交互信息，require(“webpack”) 并调用了 webpack(options)
- 实例化 Compiler.js 类，赋给 compiler 变量，compiler 继承 tapable 库，贯通整个编译流程（个别运行文件 Compile.js 都存在 /lib 目录下）
- 给 compiler 设置 Node 文件读写能力
- 给 compiler 循环挂载 咱们自定义的 plugins
- 解决 webpack 外部默认插件，其中最重要的是入口插件 EntryOptionPlugin, 此实例对象次要作用是 埋下一个 make 钩子监听
- 给 make 钩子 回调外部增加 compilation.addEntry 办法，此时钩子回调并未触发，addEntry 也不会执行，重要！
-
条件解决实现，钩子也埋完后。调用 实例对象 run 办法，即 compiler.run，重要！
- run 办法外部执行 compile 编译办法，compile 办法会 依据 compiler 实例 创立一个 compilation 实例，compilation 继承自 tapable 库
- 实例化后，触发下面埋的 make 钩子，执行下面埋的 make 钩子的回调，并传入初始化的 compilation 实例对象
- 此时执行 compilation.addEntry，执行模块编译和打包生成 dist 的操作都在这个办法内，重要！
- addEntry 内会 以 normalModuleFactory 模板创立一个 NormalModule 规范模块
- normalModuleFactory 类模板中有一些操作,（build 办法, dobuild 办法, 读取内容办法），用于操作编译咱们写的模块
- 此时一个 规范的 NormalModule 模块被创立，执行 buildMoudle，操作 NormalModule 模块
- 次要操作就是 读取文件内容，操作 ast 语法树批改文件内容（例如：require 改成__webpack_require__，以及外部的文件援用门路）
- 将批改后的内容写回到文件中，执行回调，也就是 afterBuild 办法
- 在 afterBuild 中咱们会判断以后批改的模块是否有依赖，递归判断，将模块的依赖项也进行上述批改
- 将模块和模块依赖批改后，执行回调，解决 chunk 问题，模块和模块依赖之间有 chunk 的关系，同一 chunk 能够有多个模块，
- 以后所有的入口模块都被寄存在了 compilation 对象的 entries 数组里
- 所谓封装 chunk 指的就是根据某个入口，而后找到它的所有依赖，将它们的源代码放在一起，之后再做合并
- 跟谁合并？跟 ejs 模板文件合并，生成 dist/bundle.js 文件
正文完