「这是我参与2022首次更文挑战的第14天，活动详情查看：2022首次更文挑战」
昨天，我们介绍了 webpack 的核心成员和编外成员；今天我们就再来认识一下 webpack 的小帮手吧。
webpack 的小帮手：【 配置文件、模块化编程、依赖关系图、Manifest、构建目标、热更新 】
配置文件
- webpack 解析配置文件 export 的对象的各个属性
- webpack 的配置是非常灵活的，可以根据自己对项目的需求进行配置
- 在团队开发中，为了便于团队成员间的协作，大多数情况下会对项目的配置文件进行统一
模块化编程
- 模块的引入方式
【 import、require()、define + require、@import、url(***) 、<img src=...> 】 - 技术栈倾向
【 通过各种 loader 任何技术栈均可使用 】
模块解析
- 模块间的引用关系查找
【 通过 enhanced-resolve 来解析文件路径 】 - 可解析的文件路径格式
【 绝对路径、相对路径、模块路径 】
依赖关系图
- 根据文件中的模块调用，就可以一步一步地找出模块间的依赖关系
Manifest
- webpack 编译后的代码中，不再包含 ./src 这些源码中的路径
- 模块引用的语法也都被转为了
_webpack_require_这种浏览器能够识别的代码 - manifest 是所有模块的重要信息的数据集合
- 浏览器可以通过 manifest 中的数据与 runtime 来解析和加载相关的模块
- 当对应模块的代码被修改时，浏览器会加载新的打包文件
构建目标
- 作用
【 为目标指定一个执行环境 】 - 同一份配置文件中可以同时配置两个不同的 target
- 这两个不同的 target 需要设置到不同的输出文件中
- target 类型
【 string、function() 】
热更新
- 在程序的执行过程中，如果模块有增删改的操作，就会重新加载对应的模块
通过这两天对 webpack 的介绍，相信小伙伴们对 webpack 也有了一定的了解，也能够在项目中能够更加灵活的配置了
