这是我参与第五届青训营伴学笔记创作活动的第十三天!

构建Webpack知识体系

为什么要学习Webpack？

• 理解前端工程化概念、工具、目标
• 一个团队总要有那么几个人熟悉Webpack，某种程度上可以成为个人的核心竞争力
• 高阶前端必经之路

什么是Webpack？

• 前端项目由资源构成
• 本质上是一种前端资源编译，打包工具

使用Webpack

核心处理：

• 入口处理
• 依赖解析
• 资源解析
• 递归调用依赖解析和资源解析直到所有资源处理完毕
• 资源合并打包

模块化和一致性

• 多个文件资源合并成一个，减少http请求数
• 支持模块化开发
• 支持高级JS特性
• 支持TypeScript CoffeeScript方言
• 统一图片、CSS、字体等其他资源的处理模型
• Etc.......

基本都围绕配置展开，这些配置大致可以分为两类:

• 流程类:作用于流程中某个or若干个环节，直接影响打包效果的配置项
• 工具类:主流程之外，提供更多工程化能力的配置项

流程类配置:

配置总览:

问题:Webpack只认识JS

为了处理非标准JS资源，设计出资源翻译模块-Loader，用于将资源翻译为标准JS

`使用Loader

其他特性: 链式执行 支持异步执行 分normal、pitch两种模式

理解插件

为什么要这么设计？

• 新人需要了解整个流程细节，上手成本高
• 功能迭代成本高，牵一发动全身
• 功能僵化，作为开源项目而言缺乏成长性
• Blabla
• 心智成本高=>可维护性低=>生命力弱
• 插件架构精髓:对扩展开发，对修改封闭

学习方法

加油！拒绝摆烂！让我们不负青春！在青训营度过充实的一天！