webpack 打包原理
Published:
·
LastMod: July 29, 2022
·
351 words
webpack 🔗
知识点 🔗
通过入口文件循环遍历每个模块,把对应的模块交给对应的loader去处理, 所以webpack建议把你开发应用所有需要的资源都通过js去引用。
Loader机制是webpack最核心的机制,可以通过loader加载前端需要的任何资源
loader的执行顺序是从后往前
loader处理特殊类型资源文件的加载,plugin实现各种自动化的构建任务,扩展打包
loader只在模块加载环节使用,plugin覆盖全webpack生命周期
工作原理 🔗
- webpack cli启动打包流程
- 载入webpack核心模块,创建Compiler对象
- 使用Compiler对象开始编译整个项目
- 从入口文件开始,解析模块依赖,形成依赖关系树
- 递归依赖树,将每个模块交给对应的Loader处理
- 合并Loader处理完的结果,将结果打包输出到dist目录