一句话概括 Webpack的Loader是”翻译官”——将非标准模块转换为标准模块；Plugin是”扩音器”——在任何生命周期钩子中注入自定义逻辑，两者共同构成Webpack扩展机制的双翼。 背景与意义 为什么需要自定义Loader和Plugin？ Webpack开箱即用支持JavaScript和JSON，但在实际项目中，我们几乎总是需要处理更复杂的资源：TypeScript需要编译...

一句话概括 Webpack的构建流程本质上是一个基于Tapable事件流的编译管道：从配置初始化与插件挂载开始，经过模块依赖图的递归构建与优化，最终输出打包产物，整个过程围绕Compiler和Compilation两个核心对象展开。 背景与意义 前端工程化的基座 在2014年之前，前端项目的”构建”通常意味着合并JS文件、用Grunt/Gulp跑几个任务。但随着单页应用（SPA）和组...

一句话概括 Webpack 通过将 entry、output、loader、plugin、module 五个核心概念有机组合，以”一切皆模块”的哲学统摄 JavaScript、CSS、图片、字体等资源，构建出一个高度可扩展的现代化前端打包体系。 1. 背景与意义 1.1 前端模块化演进的六个阶段 Webpack 的诞生不是偶然，它是前端模块化演进到一定阶段的必然产物。 ┌─────...

一句话概括 Promise.all 类型定义、柯里化函数类型推导、路径提取类型——这三个高级类型挑战分别考察了变长元组映射、递归条件类型与函数重载推导、模板字面量类型与递归遍历在 TypeScript 类型系统中的应用，是类型编程能力的分水岭。 一、背景与意义 1.1 什么是类型挑战？ 类型挑战（Type Challenges）源自 GitHub 上著名的 type-challeng...

一句话概括 联合类型（A | B）和交叉类型（A & B）是 TypeScript 类型系统中”或”与”且”的运算符，而联合转交叉、联合转元组、IsUnion 类型判断则是利用分布式条件类型和函数参数逆变特性实现的高级类型体操。 一、背景与意义 1.1 联合类型是什么？ 联合类型（Union Type）表示一个值可以是几种类型之一： type Status = 'idle'...

一句话概括 递归类型（Recursive Types）让 TypeScript 的类型系统具备了”深度遍历”的能力——DeepReadonly<T>、DeepPartial<T>、DeepRequired<T> 通过递归地将映射类型应用到每个嵌套层级，将单层的属性变换推广到任意深度的对象结构。 一、背景与意义 1.1 从浅层到深层 内置的 Read...

一句话概括 条件类型（T extends U ? X : Y）是 TypeScript 类型系统的”if/else”，而 infer 是其中的”模式匹配”工具——两者组合让类型系统具备了从复杂函数签名中提取信息的能力，ReturnType<T> 和 Parameters<T> 就是最经典的产物。 一、背景与意义 1.1 为什么需要条件类型？ 在没有条件类型之前...

一句话概括 TypeScript 内置工具类型（Partial、Required、Readonly、Pick、Omit、Record）本质上是用映射类型（Mapped Types）、条件类型（Conditional Types）和索引类型（Indexed Types）组合而成的类型体操模板，手写一遍就能从”会用”进阶到”理解类型编程”。 一、背景与意义 1.1 为什么需要工具类型？ ...

一句话概括 手写模板字符串解析器——将 "Hello, ${name}! Score: ${score > 60 ? 'pass' : 'fail'}" 这样的字符串解析为可执行的表达式树——本质上是一个微型编译器，需要完成词法分析 → 语法分析 → 代码生成三个核心阶段。 一、背景与意义 1.1 从 ES6 模板字符串说起 ES6 引入的模板字符串（Template Lite...

一句话概括 手写 Redux（80 行）和 Pinia（100 行）的核心逻辑，本质上是实现一个具备订阅-通知机制的全局状态容器，Redux 强调纯函数和不可变数据，Pinia 则借助 Vue3 响应式系统实现更直观的 API。 一、背景与意义 1.1 状态管理解决了什么问题 在组件化架构中，当多个组件需要共享某个状态时，状态提升（Lifting State Up）是第一反应——把状...