这是我参与「第四届青训营 」笔记创作活动的第5天
为什么要学习Webpack
- 理解前端工程化的概念、工具和目标
- 一个团队总要有那么几个人熟悉webpack，某种程度上能够成为个人的核心竞争力
- 高阶前端必经之路
什么是Webpack?
功能
Webpack是一个构建工具，能够把各种资源打包成最终能够在浏览器上运行的结果
所谓资源，就是网页中涉及到的各种诸如png、jpg等图片，js、ts等代码，css、less、sass等样式表文件，以及vue、jsx等前端框架的文件，它们都是资源，能够经过特殊手段处理后被浏览器识别运行
资源可以手动管理，但是当项目变得复杂时，手工管理的方式就有些力不从心了，比如有50个js文件，并且它们之间是有依赖关系的，如果纯手工去管理这些依赖关系，也就意味着要严格按照依赖关系去排序js文件的加载顺序，这是十分低效的一件事
开发与生产环境一致时，难以介入ts或js的新特性
比较难接入less、sass等css预处理器工具，总是需要手动运行less、sass编译器将其编译成css再手动加载，也是十分低效
Webpack打包的核心流程
Entry => Dependencies Lookup => Transform => Bundle => Output
Webpack的关键配置项：
- Loader -- 用于将非js资源转成模块
- Plugin -- 用于干一些Webpack自身不具备的特性的事情
本质
其本质上是一个前端资源编译、打包的工具，能够做到：
- 多分资源文件打包成一个Bundle
- 支持Babel、Eslint、TS、Less、Sass
- 支持模块化处理css、图片等资源文件
- 支持热更新HMR + 开发时服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持Tree-Shaking
- 支持SourceMap
- ...
如何学习Webpack?
- 入门级：学会灵活应用
- 进阶：学会扩展Webpack
- 大师：源码级理解Webpack打包编译的原理
