这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
构建Webpack知识体系
01什么是Webpack
前端项目由什么构成？--资源
PNG，JPG，GIF，WEBP，JS，TS，CSS，LESS，Vue，JSX，Sass..
可以手动管理这些资源
但是
- 依赖手工，比如有50个JS文件...操作，过程繁琐
- 当代码文件之间有依赖的时候，就得严格按依赖顺序书写
- 开发与生产环境一致，难以接入TS或JS新特性
- 比较难接入Less，Sass等工具
- JS，图片，CSS资源管理模型不一致
这些都是旧时代非常突出的问题，对开发效率影响非常大，直到出现了很多工程化工具，某种程度上正是这些工具的出现，才有了“前端工程”这一概念
本质上是一种前端资源编译，打包工具
-
多份资源文件打包成一个Bundle
-
支持
- Babel，Eslint，TS，CoffeScript，Less，Sass
-
支持模块化处理css，图片等资源文件
-
支持HMR+开发服务器
-
支持持续监听，持续构建
-
支持代码分离
-
支持Tree-shaking
-
支持Sourcemap
-
...
02使用Webpack
核心流程--极度简化版
-
入口处理
从'entry'文件开始，启动编译流程
-
依赖解析
从'entry'文件开始，根据'require' or 'import'等语句找到依赖资源
-
资源解析
根据'module'配置，调用资源转移器，将png,css等非标准JS资源转译为JS内容
-
资源合并打包
将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
- 递归调用2，3，直到所有资源处理完毕
模块化+一致性
- 多个文件资源合并成一个，减少http请求数
- 支持模块化开发
- 支持高级JS特性
- 支持Typescript，CoffeeScript方言
- 统一图片,CSS,字体等其他资源的处理模型
- etc...
使用Webpack
关于Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类
-
流程类：
作用于流程中某个或若干个环节，直接影响打包效果的配置项
-
工具类：
主流程之外，提供更多工程化能力的配置项
使用Webpack--流程类配置
-
Get Start
输入'entry' 'context'
-
Dependencies
模块解析 'resolve' 'externals'
-
Transform
模块转译 'module'
-
Combine Assets
后处理 'optimization' 'mode' 'target'
使用Webpack--配置总览
按使用频率：
- 'entry/output'
- 'module/plugins'
- 'mode'
- 'watch/devServer/devtool'
使用Webpack
- 声明入口'entry'
- 声明产物出口'output'
- 运行'npx webpack'
使用Webpack--处理CSS
- 安装Loader
- 添加'module' 处理css文件
使用Webpack--接入Babel
- 安装依赖
- 声明产物出口'output'
- 执行'npx webpack'
使用Webpack--工具线
使用Webpack--HMR
Hot Module Replacement--模块热替换
- 开启HMR
- 启动Webpack
使用Webpack--Tree-Shaking
Tree-Shaking--树摇，用于删除Dead Code
Dead Code
- 代码没有被用到，不可到达
- 代码的执行结果不会被用到
- 代码只读不写
- ...
Tree-Shaking
- 模块导出了，但未被其他模块使用
开启tree-shaking
- 'mode:"production"'
- 'optimization.usedExports:true'
PS:对工具类库如Lodash有奇效
其他工具
- 缓存
- Sourcemap
- 性能监控
- 日志
- 代码压缩
- 分包
- ...
