这是我参与「第五届青训营 」笔记创作活动的第12天
为什么要学习Webpack？
- 理解前端“工程化"概念、工具、目标
- 一个团队总要有那么几个人熟悉Webpack，某种程度上可以成为个人的核心竞争力
- 高阶前端必经之路
什么是Webpack
前端项目由什么构成？ ——资源
手动管理资源的劣势：
- 依赖手工，比如有50个JS文件...操作，过程繁琐
- 当代码文件之间有依赖的时候，就得严格按依赖顺序书写
- 开发与生产环境一致,难以接入TS或JS新特性
- 比较难接入Less、Sass等工具
- JS、图片、CSS资源管理模型不一致
工程化工具
以上都是旧时代非常突出的问题，对开发效率影响非常大，直到出现了很多的工程化管理工具：
Webpack
本质上是一种前端资源编译，打包工具
- 多份资源文件打包成一个 Bundle
- 支持Babel、Eslint、TS、CoffeScript、Less、Sass
- 支持模块化处理css、图片等资源文件
- 支持HMR ＋开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持Tree-shaking
- 支持Sourcemap
- ...
配置Webpack
安装
编译配置文件
执行编译命令
核心流程-极度简化版
模块化 + 一致性
- 多个文件资源合并成一个，减少http请求数
- 支持模块化开发
- 支持高级JS 特性
- 支持 Typescript、CoffeeScript方言
- 统一图片、CSS、字体等其它资源的处理模型
- Etc...
