webpack 理解是一种基于事件流的编程规范，一系列的插件运行。主要就是分析 项目结构， 找到 JS 模块 以及一些浏览器不能直接运行的拓展语言 进行处理 以便 浏览器能正确使用。
分析 webpack 打包出来的代码
相互引用关系 index.js ---> foo.js ----> bar.js
打包结果分析
首先打包出来的是一个 自执行函数IIFE
自执行函数
函数的参数 是一个 object 对象， key 是 文件路径， value 为一个可执行的函数，而函数内容其实就是模块中的内容
函数的参数
当这个 自执行函数 IIFE 执行的时候，从入口 文件出发， 依次执行 对应的函数，如果遇到 __webpack_require__ ，就会递归进行 执行 模块的依赖。比如 这个示例中 从这个入口代码中解析出依赖 foo.js，然后再读取 foo.js 这个代码文件，解析出依赖 bar.js 代码文件，继续解析其依赖，递归下去，直至没有更多的依赖模块，最终形成一颗模块依赖树。
开始执行
最后 每个模块就 成了一个 函数， 将 各个模块代码 用 modules 的方式组织起来， 也就是 最后 IIFE 函数的参数， key 是 文件路径， value 是 模块内容，用函数的形式包裹，比如
modules
已经执行的代码会放在 installedModules 中，如果有模块依赖此项，就直接 返回就行了， 没有的话 我们就要执行 key 对应的 value 函数了。
webpack 开发流程
了解了 webpack 打包出来的内容后，我们分析一下 webpack 的开发流程
1. 初始化参数: 从配置文件 和 shell 语句中 读取 与合并参数，得到最终的参数；
2. 开始编译：得到配置参数后，初始化 Complier 对象，加载所有的配置，执行对象的 run 方法开始编译；
3. 确定入口：根据配置中的 entry 找出所有的入口文件；
4. 编译模块： 从入口文件出发，调用所有配置的 loader 对模块进行编译，在找出模块依赖的模块，递归 本步骤知道所有入口依赖的文件都经过了本步骤的出来；
5. 完成模块编译： 在经过第四步使用 loader 编译所有模块后，得到了每个模块被编译后的最终内容 以及 它们之间的依赖关系；
6. 输出资源： 根据入口 和 模块之间的依赖关系，组装成一个个包含多个模块的 Chunk， 再把每个 Chunk 转换成一个单独的文件加入到输出列表；
7. 输出完成： 在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。
实现简单的 webpack
要打包的文件
webpack.config.js
temp.ejs
myWebpack.js
compiler
打包出来的结果
分析：首先拿到 webpack.config.js 配置文件，传入 compiler 进行编译；
根据入口文件 entry 开始进行编译， 采用 fs 模块 读取 文件的内容，也就是 打包后的 函数参数的 value 值， 代码：let source = fs.readFileSync(modulePath, 'utf8');
在此过程中 我们会将 读取的代码 source 经过 loader 的 处理，这就是 为什么 loader 是一个 函数 ，参数 为 source;
接下来我们就要分析 入口文件依赖了，比如 require，采用 AST 的处理方式，找到 依赖的 模块的路径，然后 在调用 parseModule 重复 步骤 2 ，直到 文件没有依赖，这样我们就将所有文件都解析完了，并且都存入了 modules 中，key 就是文件路径，value 就是 文件内容；
最后我们只要将 modules 输出到 文件中，这是个 自执行的函数，加载到 html 中。
总结
利用 node fs 模块对文件的操作，AST 分析 依赖模块，node path 分析路径关系。当然 真正的 webpack 远比这复杂， tapable 的事件流机制，让我们可以随时的 参与 各个声明周期的 扩展工作，loader 、plugins 的扩展非常灵活，这些都是要学习的地方。
网友评论