webpack概念
webpack的作用、理解、定义,解释
entry:入口,Webpack执行构建的第一步将从Entry开始,可抽象成输入。
module:模块,在Webpack里一切皆模块,一个模块对应一个文件。Webpack会从配置的Entry开始递归找出所有依赖的模块。
bundle:是由webpack打包出来的文件
chunk:是指webpack在进行模块依赖分析的时候,代码分割出来的代码块,一个Chunk由多个模块组合而成。
loader:将一系列流程用代码去实现,让代码自动化地执行这一系列复杂的流程
plugin:扩展插件,在Webpack构建流程中的特定时机注入扩展逻辑,来改变构建结果或做我们想要的事情。
output:输出结果,在Webpack经过一系列处理并得出最终想要的代码后输出结果。
webpack安装
npm install webpack
webpack执行命令
npx webpack
webpack基本功能
代码转换:TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等
文件优化:压缩 JavaScript、CSS、html 代码,压缩合并图片等
代码分割:提取多个页面的公共代码、提取首屏不需要执行的代码让其异步加载
模块合并:在采用模块化开发的项目有很多模块和文件,需要构建功能把模块合并成一个文件
自动刷新:监听本地源代码的变化,自动构建,刷新浏览器
代码校验:在代码被提交到仓库前需要检测代码是否符合规范,以及单元测试是否通过
自动发布:更新完代码后,自动构建出线上发布代码并传输给发布系统。
webpack执行过程
- 初始化 Compiler:new Webpack(config) 得到Compiler对象
- 开始编译 调用 Compiler 对象 run 方法 开始执行编译
- 确定入口:根据配置中的 entry 找出所有的入口文件
- 编译模块:从入口文件出发,调用所有配置的 loader 对模块进行编译,再找出该模块依赖的所有模块,递归直到所有的模块都被加载进来
- 完成模块编译:在经过第4步后,得到了每个模块被编译后的最终内容以及它们之间的依赖关系
- 输出资源:根据入口和模块之间的关系,组装成一个个包含多个模块的Chunk,再把每个Chunk转换成一个单独的文件加入到输出列表。
- 输出完成:确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统
webpack的构建流程
- 校验配置文件
将cli参数和webpack配置文件中的配置整合得到一个完整的配置对象 - 生成Compiler对象
webpack在启动时会实例化插件对象,在初始化compiler对象之后会调用插件的apply方法传入compiler对象,插件实例会在apply方法中注册感兴趣的钩子,webpack在执行过程中会根据构建阶段回调相应的钩子
载入webpack核心模块,创建compiler对象,通过compiler编译整个项目 - 初始化默认插件
- run阶段:如果运行在watch模式就执行watch方法否则就执行run方法
- compilation阶段:创建compilation对象回调compilation相关钩子
- emit阶段:文件内容准备完成,准备生成文件,这是最后一次修改最终文件的机会
- afterEmit阶段:文件已写入磁盘完成
- done阶段:完成编译