[学习笔记] Webpack简单了解

1. 什么是模块？

任何引入的npm包, 内置api或者拥有独立功能的js文件都可视为模块.

当编写程序时, 把所有代码堆在一起时非常杂乱无章的, 代码量一旦多的时候维护起来就会非常的难, 所以需要慢慢养成模块化思想, 即将特定的功能拆分为多个代码段, 每个代码段拥有独立特定的功能, 通过设计, 开发来连接接口并组合起来.

就像书上一个很好的比喻: 把城市想象成程序, 城市中有各个不同的职能部门, 学校, 医院, 警察局, 消防局等, 各司其职. 而这些职能部门就是程序中的一个个模块, 只有各个职能部门(模块)正常运作, 整个城市(程序)才能很好的运作起来

---

2. 模块化解决了什么问题?

早期在编写web应用时, 为了实现多样的功能, 开发人员引用多个script是家常便饭的事情, 但也引出了很多缺点:

• 需要手动维护 JS 的加载顺序, 多个script之间通常会有依赖的关系, 但这种依赖性是隐形的, 除非开发人员添加注释写明关系
• 每一个script都意味着一次静态资源的请求, 建立连接的成本是很高的, 过多的请求会导致页面的渲染效率下降
• 在每个script中, 顶层作用域就是全局作用域, 若没有任何处理而直接在代码中进行变量或者函数声明, 容易造成全局作用域的污染

所以模块化的出现解决了:

• 使文件结构, 业务逻辑更加清晰, 能很清楚看到模块间的依赖关系.
• 通过工具(module bundler)进行打包, 在页面中按需加载并合并资源文件, 减少网络开销
• 多个模块之间作用域独立, 不会造成命名冲突

---

3. 什么是Webpack?

是一个开源的Javascript 模块打包工具.

---

4. 什么是模块打包?

解决模块之间的依赖, 把各个模块按照特定的规则和顺序组织在一起, 并最终结合成一个(有时候多个) js文件.

---

5. 为什么需要Webpack?

简单的web应用写起来容易, 但一旦规模大了, 人工维护代码的成本就会变高, 所以需要webpack来管理代码之间的依赖性

---

6. 那么多打包工具为什么就选择Webpack

• 兼容性高, 默认支持多种模块标准(AMD, CommonJS, ES6模块).
• 通过loader实现支持处理各种不同类型资源(Javascript, CSS, 模版, 图片等)
• 核心功能——代码分割(code splitting), 分割打包后的资源, 页面加载时首屏按需加载, 其余后续动态加载, 提升首屏加载速度
• 社区强大支持, 除了webpack核心工具外, 还拥有许多其他开发者所编写的功能工具以供使用

---

7. 打包工具是怎么工作的？

• 将存在依赖关系的文件按照特定规定合并为单个js文件, 并一次性加载进页面当中
• 页面初始化时加载一个入口模块, 其他模块异步加载

---

==============================================
如有错误请指出！谢谢大佬