【Webpack】生命周期

概述

Webpack 的生命周期是指从启动到结束整个过程中会经历的一系列步骤。简单来说,Webpack 的生命周期分为以下几个主要阶段:

1)初始化:Webpack 读取配置文件,初始化参数。

2)编译:根据入口文件,递归地构建依赖图。

3)模块解析与转换:模块被解析、编译和转换成标准模块。

4)优化:在生成块和模块之后,对依赖关系进行优化。

5)生成:根据最终的依赖关系,生成最终的输出文件。

扩展

1)初始化:

  • Webpack 从配置文件中读取配置,初始化编译器 (Compiler) 对象。
  • 初始化之后,调用所有配置的插件的 apply 方法,附上 Compiler 实例。
  • 根据配置文件中的 entry,确定构建的入口文件。

2)编译:

  • 从入口文件开始,调用对应的 loader 进行处理。
  • 递归地解析入口文件中依赖的模块,同样应用相应的 loader。
  • 构建依赖图(Dependency Graph),其中每个模块都是节点。

3)模块解析与转换:

  • Webpack 内部使用 acornesprima 等工具对模块进行解析。
  • loader 将特定类型的文件(如 TypeScript、Sass)转换成 JavaScript 模块。
  • 在此过程中,如果遇到动态导入等需要进一步解析的模块,会继续处理。

4)优化:

  • 此阶段进行模块优化,包括 Tree-Shaking、Scope Hoisting 等。
  • 优化图形中模块的依赖关系,消除冗余代码。

5)生成:

  • 根据优化后的依赖关系图,生成块(Chunk)。
  • 最后将这些块输出到配置好的输出目录,每个块即为最终生成的文件(如 bundle.js)。

插件在不同的生命周期钩子中插入代码,例如:compiler.hooks.run.tap 可以在编译开始时执行,compilation.hooks.optimize 可以优化模块。通过这些钩子,能够更灵活地控制 Webpack 的行为。

相关推荐
爱吃青椒不爱吃西红柿‍️7 分钟前
华为ASP与CSP是什么?
服务器·前端·数据库
一棵开花的树,枝芽无限靠近你10 分钟前
【PPTist】添加PPT模版
前端·学习·编辑器·html
陈王卜13 分钟前
django+boostrap实现发布博客权限控制
java·前端·django
景天科技苑21 分钟前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
SameX22 分钟前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
小行星12532 分钟前
前端预览pdf文件流
前端·javascript·vue.js
小行星12539 分钟前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf
Lysun0011 小时前
[less] Operation on an invalid type
前端·vue·less·sass·scss
J总裁的小芒果1 小时前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript
Lei_zhen961 小时前
记录一次electron-builder报错ENOENT: no such file or directory, rename xxxx的问题
前端·javascript·electron