前端工程化

前端模块化

模块化发展进程

1. 全局 function 模式
2. namespace 模式：简单对象封装
3. IIFE模式：匿名函数自调用(闭包)
4. IIFE模式增强：引入依赖

模块化的好处

• 避免命名冲突(减少命名空间污染)
• 更好的分离, 按需加载
• 更高复用性
• 高可维护性

模块化规范

1. CommonJS：Node 应用由模块组成。在服务器端，模块的加载是运行时同步加载的；在浏览器端，模块需要提前编译打包处理。
2. AMD：如果是浏览器环境，要从服务器端加载模块，这时就必须采用非同步模式，因此浏览器端一般采用AMD规范。
3. CMD：专门用于浏览器端，模块的加载是异步的，模块使用时才会加载执行。
4. ES6模块化：ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。

ES6 模块化与 CommonJS 模块化的差异

1. CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
2. CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

webpack 构建流程

1. 初始化参数：从配置文件中读取参数，会创建 compiler 对象
2. 开始编译：加载所有配置的插件，执行 run 方法，开始执行编译
3. 确定入口：在配置文件中找到入口文件
4. 编译模块：从入口文件出发，调用所有 Loader 对模块进行编译
5. 完成模块编译：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表
6. 输出完成：根据配置的输出路径和文件名，把文件内容写入到文件系统