打包原理
# 01. 查询webpack入口文件
通过npm run build 运行webpack
在命令行运行命令后，npm会让命令行工具进入node_modules.bin目录查找是否存在 webpack.sh 或者 webpack.cmd 文件，如果存在，就执行，不存在，就抛出错误。
实际的入口文件是：node_modules\webpack\bin\webpack.js
process.exitCode = 0; //1. 正常执行返回runCommand(packageManager, installOptions.concat(cli.package))
//2. 运行某个命令const isInstalled = packageName =>{...};
//3. 判断某个包是否安装const CLIs =[...];
//4. webpack 可用的CLI: webpack-cli和webpack-command
const installedClis = CLIs.filter(cli => cli.installed);
//5. 判断是否两个ClI 是否安装了 if (installedClis.length === 0){...}else if
//6. 根据安装数量进行处理(installedClis.length === 1){...}else{...}.
webpack 最终找到 webpack-cli (webpack-command) 这个npm包，并且执行 CLI
# 02. webpack-cli
引入 yargs，对命令行进行定制
分析命令行参数，对各个参数进行转换，组成编译配置项
引用webpack，根据配置项进行编译和构建
# 03. Tapable
Tapable 是一个类似于 Node.js 的 EventEmitter 的库, 主要是控制钩子函数的发布与订阅,控制着 webpack 的插件系统。
Tapable库暴露了很多 Hook（钩子）类，为插件提供挂载的钩子
# 04. webpack的编译都按照下面的钩子调用顺序执行
# WebpackOptionsApply
将所有的配置 options 参数转换成 webpack 内部插件使用默认插件列表
- output.library -> LibraryTemplatePlugin
- externals -> ExternalsPlugin
- devtool -> EvalDevtoolModulePlugin, SourceMapDevToolPlugin
- AMDPlugin, CommonJsPlugin
- RemoveEmptyChunksPlugin
# Compiler hooks
流程相关：
- (before-)run
- (before-/after-)compile
- make
- (after-)emit ·done
监听相关：
- watch-run
- watch-close
# Compilation
Compiler 调用 Compilation 生命周期方法
- addEntry -> addModuleChain
- finish (上报模块错误)
- seal
# ModuleFactory
NormalModuleFactory -> ModuleFactory ContextModuleFactory -> ModuleFactory