Webpack知识体系|青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第11天
为什么要学习Webpack？
- 理解前端“工程化”概念，工具，目标
- 高阶前端必经之路
什么是webpack
前端项目构成
工程化工具
webpack
本质上是一种前端资源编译，打包工具
- 多份资源文件打包成一个Bundle
- 支持Babel，Eslint,TS,CoffeSccript,Less,Sass
- 支持模块化处理css，图片等资源文件
- 支持HMR + 开发服务器
- 支持持续监听，持续构建
- 支持代码分离
- 支持Tree-shaking
- 支持Sourcemap
核心流程 1.入口处理
从‘entry’文件开始，启动编译流程
2.依赖解析
从‘entry’文件开始，根据‘require’ or ‘import’ 等 语句找到依赖资源
3.资源解析
根据‘module’配置，调用资源转移器，将png,css等非 标准JS资源转译为JS内容
4.资源合并打包
将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
模块化 + 一致性
- 多个文件资源合并成一个，减少HTTP请求数
- 支持模块化开发
- 支持高级JS特性
- 支持Typescript，CoffeeScript方言
- 统一图片，CSS，字体等其他资源的处理模型
- Etc
使用Webpack
Tree-shaking
Dead Code
- 代码没有被用到，不可到达
- 代码的执行结果不会被用到
- 代码只读不写
Tree-shaking
- 模块导出了，但未被其他模块使用
理解Loader
Webpack只认识js
为了处理非标准Js资源，设计出资源翻译模块——Loader 用于将资源翻译为标准JS
Loader特点
- 链式执行
- 支持异步执行
- 分normal，pitch两种模式
