## 模块化： 1. commonJS ``` 1. 通过 require 方法引入 2. 通过module.exports 导出需要暴露的接口 3. 同步加载其他模块 4. 可直接运行在node环境，无法直接运行在浏览器环境下,需要通过用具转换成es5 ``` 2. AMD ``` 1. 异步加载依赖模块 2. requirejs 3. 可直接运行在node和浏览器环境下 ``` 3. es6 模块化 4. 样式文件中的模块化 如scss ## 模块依赖树 看如下这部分的代码 ``` // entry.js import { bar } from './bar.js'; // 依赖 ./bar.js 模块 // bar.js const foo = require('./foo.js'); // 依赖 ./foo.js 模块 ``` 在入口文件 entry.js 执行时，发现依赖于 bar.js ，bar.js 文件依赖于 foo.js，递归执行最终获得一颗模块依赖树 ## webpack 如何解决变量相互干扰和有效控制执行顺序 1. 将每个模块包装成一个 js function 2. 后又提供一个引用模块的方法 接上方代码，打包后变成： ``` // 分别将各个依赖模块的代码用 modules 的方式组织起来打包成一个文件 // entry.js modules['./entry.js'] = function() { const { bar } = __webpack__require__('./bar.js') } // bar.js modules['./bar.js'] = function() { const foo = __webpack__require__('./foo.js') }; // foo.js modules['./foo.js'] = function() { // ... } // 已经执行的代码模块结果会保存在这里 const installedModules = {} function __webpack__require__(id) { // ... // 如果 installedModules 中有就直接获取 // 没有的话从 modules 中获取 function 然后执行，将结果缓存在 installedModules 中然后返回结果 } ``` ## webpack 工作流程 ### 核心概念： * Compiler - webpack 运行入口， 定义 webpack 构建主要流程和构建核心对象 compilation * Compilation - 由 Compiler 实例化，存储和控制构建流程中使用的数据（**最终服务于 Template**） * Chunk - 一个入口会对应一个 chunk * Module - 代码模块类，存储代码模块所有信息，比如`dependencies`记录代码模块的依赖 （**管理代码模块相互关系**） * Parser - 解析依赖，基于[acorn](https://github.com/acornjs/acorn)来分析 AST 语法树，解析代码模块依赖 * Dependency - 代码模块的依赖（**管理代码模块相互关系**） * Template - 生成最终代码的模版 ### webpack 运行的大概工作流程 * 创建 Compiler （**完整的webpack环境配置**） * 调用 compiler.run 开始构建 * 创建 Compilation （**是一个资源的构建**） * 基于配置开始创建 Chunk * 使用 Parser 从 Chunk 开始解析依赖 * 使用 Module 和 Dependency 管理代码模块相互关系 * 使用 Template 基于 Compilation 的数据生成结果代码 总的来说，webpack是根据文件间的依赖关系对其进行静态分析，将这些模块按指定规则生成静态资源，当webpack处理程序时，它会递归地构建一个依赖关系图，将所有这些模块打包成预期环境可以执行的bundle。