概念：什么是模块化

1. 什么是模块化？

想象你写代码时，把整个项目拆成一个个独立的小零件（比如：功能A、功能B、UI组件、工具函数等）。每个零件专注做一件事，彼此通过接口（输入输出）连接。这就是模块化！

类比：搭乐高积木，每块积木独立且可重复使用，组合起来能拼成复杂模型。

2. 为什么要模块化？

✅ 代码复用：重复功能不用重写，直接调用模块。
✅ 便于维护：一个模块出问题，不影响其他模块。
✅ 分工协作：不同人负责不同模块，互不干扰。
✅ 依赖管理：模块间通过接口通信，避免全局变量污染。

3. 模块化的常见形式

ES6 Modules（现代主流）

// 导出模块
export function add(a, b) { return a + b; }
 
// 导入模块
import { add } from './math.js';

CommonJS（Node.js 早期）

// 导出
module.exports = { add: (a, b) => a + b };
 
// 导入
const math = require('./math.js');

CommonJS和ESM 的区别？

4. Webpack 和模块化的关系

Webpack 是一个模块打包工具，核心作用：
1️⃣ 统一处理依赖：把所有模块（JS、CSS、图片等）视为“依赖”，生成依赖关系树。
2️⃣ 打包整合：将分散的模块合并成少数几个文件（如 bundle.js），解决浏览器无法直接加载模块的问题。
3️⃣ 优化代码：压缩、合并、Tree Shaking（删除未使用的代码）等。

5. Webpack 如何实现模块化？

步骤1：指定入口文件（如 index.js），分析所有依赖。
步骤2：递归加载所有关联模块，形成依赖图。
步骤3：将模块代码转换、合并，输出为浏览器可运行的静态资源。

示例：
假设有 a.js 和 b.js 两个模块，经过 Webpack 打包后，浏览器只需加载一个 bundle.js。

6. 模块化的关键概念

入口（Entry）：项目的主文件，Webpack 从这里开始分析依赖。
出口（Output）：打包后的文件存放位置和命名。
加载器（Loader）：让 Webpack 能处理非 JS 文件（如 CSS、图片）。
插件（Plugin）：扩展 Webpack 功能（如优化、压缩）。

7. 模块化的实际好处

解决全局污染：模块内变量不会泄露到全局。
按需加载：只加载需要的模块，提升性能。
工程化开发：适合大型项目，结构清晰易扩展。

总结 🌟

模块化是把代码拆分成独立模块的开发方式，Webpack 是帮我们管理、打包这些模块的工具。就像用集装箱运输零散货物，模块化让代码更高效、更易维护！

Quartz 4

Explorer