基本打包机制
本质上，webpack 是一个现代 java script 应用程序的静态模块打包器(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//转换后的代码 }
2.1 从入口开始，广度遍历所有依赖，并输出整个项目的依赖图谱
graphArray.forEach(item => { graph[item.filename] = { dependencies: item.dependencies, code: item.code } }) return graph
3.1 生成代码字符串
4.1 写入文件
完整代码见：https://github.com/LuckyWinty/blog/tree/master/code/bundleBuild
以上是打包的基本机制，而webpack的打包过程，会基于这些基本步骤进行扩展，主要有以下步骤：
1. 初始化参数 从配置文件和 Shell 语句中读取与合并参数，得出最终的参数
2. 开始编译 用上一步得到的参数初始Compiler对象，加载所有配置的插件，通 过执行对象的run方法开始执行编译
3. 确定入口 根据配置中的 Entry 找出所有入口文件
4. 编译模块 从入口文件出发，调用所有配置的 Loader 对模块进行编译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
5. 完成模块编译 在经过第4步使用 Loader 翻译完所有模块后， 得到了每个模块被编译后的最终内容及它们之间的依赖关系
6. 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk,再将每个 Chunk 转换成一个单独的文件加入输出列表中，这是可以修改输出内容的最后机会
7. 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，将文件的内容写入文件系统中。
整个流程概括为3个阶段，初始化、编译、输出。而在每个阶段中又会发生很多事件，Webpack会将这些事件广播出来供Plugin使用。具体钩子，可以看官方文档：https://webpack.js.org/api/compiler-hooks/#hooks
Webpack Loader
Loader 就像一个翻译员，能将源文件经过转化后输出新的结果，并且一个文件还可以链式地经过多个翻译员翻译。
概念：
- 一个Loader 的职责是单一的，只需要完成一种转换
- 一个Loader 其实就是一个Node.js 模块，这个模块需要导出一个函数
开发Loader形式
1.基本形式
module.exports = function (source ) { return source; }
2.调用第三方模块
const sass= require('node-sass');
module.exports = function (source) {
return sass(source);
}
由于 Loader 运行在 Node.js 中，所以我们可以调用任意 Node.js 自带的 API ，或者安装第三方模块进行调用
3、调用Webpack的Api
//获取用户为 Loader 传入的 options const loaderUtils =require ('loader-utils'); module.exports = (source) => { const options= loaderUtils.getOptions(this); return source; } //返回sourceMap module.exports = (source)=> { this.callback(null, source, sourceMaps); //当我们使用 this.callback 返回内容时 ，该 Loader 必须返回 undefined, //以让 Webpack 知道该 Loader 返回的结果在 this.callback 中，而不是 return中 return; } // 异步 module.exports = (source) => { const callback = this.async() someAsyncOperation(source, (err, result, sourceMaps, ast) => { // 通过 callback 返回异步执行后的结果 callback(err, result, sourceMaps, ast) }) } //缓存加速 module.exports = (source) => { //关闭该 Loader 的缓存功能 this.cacheable(false) return source }
source参数是compiler 传递给 Loader 的一个文件的原内容，这个函数需要返回处理后的内容，这里为了简单起见，直接将原内容返回了，相当于该Loader 有做任何转换.这里结合了webpack的api和第三方模块之后，可以说loader可以做的事情真的非常非常多了...
更多的webpack Api可以看官方文档：https://webpack.js.org/api/loaders
Webpack Plugin
专注处理 webpack 在编译过程中的某个特定的任务的功能模块，可以称为插件
概念：
- 是一个独立的模块
- 模块对外暴露一个 js 函数
- 函数的原型 (prototype) 上定义了一个注入 compiler 对象的 apply 方法 apply 函数中需要有通过 compiler 对象挂载的 webpack 事件钩子，钩子的回调中能拿到当前编译的 compilation 对象，如果是异步编译插件的话可以拿到回调 callback
- 完成自定义子编译流程并处理 complition 对象的内部数据
- 如果异步编译插件的话，数据处理完成后执行 callback 回调。
开发基本形式
// 1、BasicPlugin.js 文件（独立模块） // 2、模块对外暴露的 js 函数 class BasicPlugin{ //在构造函数中获取用户为该插件传入的配置 constructor(pluginOpt