这是我参与「第四届青训营 」笔记创作活动的第17天
什么是Webpack
前端项目由什么构成? —— 资源
旧时代手动管理这些资源，但有以下几个对开发效率影响非常大的缺点：
依赖手工，比如有50个JS文件……操作过程繁琐
当代码文件之间有依赖的时候，就得严格按依赖顺序书写
开发与生产环境一致，难以接入TS或JS新特性
比较难接入Less、Sass等工具
JS、 图片、CSS资源管理模型不一致
后来，出现了很多前端工程化工具，特别是Webpack
Web本质上是一种前端资源编译、打包工具
多份资源文件打包成一个Bundle
支持
Babel、Eslint、 TS、 CoffeScript、Less、 Sass
支持模块化处理css、图片等资源文件
支持 HMR + 开发服务器
支持持续监听、持续构建
支持代码分离
支持 Tree-shaking
支持 Sourcemap
- 从entry中的入口文件开始启动编译
- 依赖解析：根据
require或者import等语句找到以来资源 - 根据
module配置，调用资源转移器将非JS资源编译为JS内容，直至所有资源处理完毕 - 资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
进阶：学会扩展Webpack
- 理解Loader、 Plugin机制，能够自行开发Webpack组件
- 理解常见性能优化手段，并能用于解决实际问题
- 理解前端工程化概念与生态现状
大师：源码级理解Webpack打包编译原理
- 阅读源码，理解Webpack编译、打包原理，甚至能够参与共建
