webpack 体系

webpack

1. 啥东西：打包工具，将静态文件，进行打包构建，并转换为浏览器可识别的形式 以及性能优化，压缩，合并文件等

hash

1. 每个文件后面一堆随机数，啥意思
2. 定义：单向加密，算法，将输入通过散列算法，转化为对应输出，具备雪崩性，确定性等，那如果出现了哈系冲突怎么解决
3. 哈希分类： 全局hash，文件hash chunk hash
4. 目的：缓存复用。避免重复请求。

打包链路

1. 根据入口文件，分析依赖图
2. 按照配置，拆分各个chunk文件
3. 最终再加载 loader 和plugin （两个谁先呢？）
4. 最终输出合并后文件

bundle chunk module

从层级上看 module --》 chunk--》bundle module 每个单独文件都是一个module chunk 是module 的集合 bundle 最终输出文件

---

热更新

1. 代码变化，局部刷新技术

操作逻辑

1. 修改代码
2. webpack 监听 发生变化后
3. webpack 通过websocket 告知浏览器
4. 浏览器请求最新打包文件，再进行局部更新替换

loader

• Q是什么
• A 转换器，将模块转化为浏览器可识别内容
• Q 解决神码问题
• A 本质就是一个模块导出函数

module。exports = （source，map，meta） =》{
// 处理
 source 源文件
 return result
}

为什么要有loader webpack 不识别非js 文件，需要统一处理为可识别文件

分类

• q 同步loader 异步loder

• a 同步loder 会等待上一个loader 返回结果，但是异步loader 通常时内部有异步逻辑，因此还是会等待异步内容返回，再去执行下一个loader，依然会阻塞，但是要等待异步内容返回

• Q pitch 函数是什么，困难 待功课

• A首先 loader 执行阶段分为 pitch 和normar 阶段

• pitch 又分为4个阶段 post inline normal pre 四种loader， normal 阶段反向

Q:那么什么是normal 阶段呢， A:本身loader 函数内容的执行就是 A pitch 是normal 的一个属性

如该pitch 阶段中间存在返回，直接熔断，执行normal loader

这样是为了把剩余loader 返回的js内容，给webpack 直接去执行，避免手动实现相关逻辑

loder 常用

• 1. babel-loader
• 2. ts-loader
• 3. style-loder
• a：babel-loader 其实思路利用babel/core 核心库，里的transform 将其进行转换为可识别内容，通过，词法，语法分析等。
• a ts-loader 是直接利用ts 编译器进行转换，相比于babel-loader 还多了相关类型检查，对于较复杂，项目，优先使用ts-oader

plugin

1. plugin 作为一种插件机制，相比于loader 作用于单模块级别，自身用于全局webpack 生命周期，因调用apply 后传递了全局模块compliler，里面包含所有生命周期，因此可以贯穿整个webpack 流程执行

2. loader 专用于单文件内容处理，比如babel。ts-loader 等plugin 是全局性的比如对整改css 文件进行压缩处理，打包构建内容可视化处理等。