webpack 插件机制

webpack 资源模块加载

• webpack 内部(loader)默认只会处理 JavaScript 文件
  • 也就是说它会把打包过程中所有遇到的文件当作 JavaScript 文件去解析
• 可以为其他类型的文件添加不同的加载器(loader)

快速上手

webpack 作为目前最主流的前端模块打包器，提供一整套前端项目模块化方案，不仅仅局限于只对 JavaScript 的模块化

模块打包工具的由来

模块化确实很好的解决了在复杂应用开发过程中的代码组织问题，但是随着引入模块化，又会产生新的问题

什么是 Virtual DOM

• Virtual DOM（虚拟 DOM），是由普通的 JS 对象来描述 DOM 对象
• 真实 DOM 成员

学习目的

• 了解响应式原理，从原理层面解决实际项目中的问题
  1. 给 Vue 实例新增一个成员是否是响应式的？
  2. 给属性重新赋值成对象，是否是响应式的？
• 学习 Vue 响应式原理，为学习 Vue 源码做铺垫

了解 React 元素是如何被渲染到页面中的，也就是 React 元素初始渲染的过程 React 元素渲染到页面分为两个阶段

• render 阶段
• commit 阶段

React 架构

React 16 版本中使用了 Fiber Reconciler 替代了 Stack Reconciler 在 Fiber Reconciler 中又分为三层：调度层、协调层、渲染层

JSX 被 Babel 编译为 React.createElement 方法的调用，createElement 方法在调用后返回的就是 ReactElement，就是 virtualDOM

介绍

• 阅读 React 核心源码的过程中，肯定会遇到一些不理解的地方，这个时候就需要对源码进行调试，通过运行源码来查看结果是否与期望一致
• 所以需要搭建一个本地的源码调试环境，这个环境并不是通过脚手架工具简单创建一个 React 项目
  • 因为脚手架内部使用的 React 源码和官方发布在 GitHub 中的源码是有差别的
• 要去克隆 React 官方放在 GitHub 中的源码，再结合脚手架工具来搭建本地的源码调试环境