这是我参与「第五届青训营 」笔记创作活动的第15天
01.什么是Webpack?
前端项目由什么构成？--资源
PNG,JPG,GIF,JS,TS,css,vUE...
Webpack本质上是一种前端资源编译打包工具
02.使用Webpack
- 安装
- 编辑配置文件
- 执行编译命令
核心流程--极度简化版
- 入口处理
- 依赖解析
- 资源分析
- 资源合并打包
模块化+一致性
- 多个文件资源合并成一个，减少http请求数
- 支持模块化开发
- 支持高级JS特性
- 支持Typescript,CoffeeScript方言
- 统一图片，css,字体等其他资源的处理模型
配置大致分为两类
- 流程类：作用于流程中某个or若干个环节，直接影响打包效果的配置项
- 工具类：主流程外，提供更多工程化能力的配置项
使用Webpack--流程类配置
- 输入:entry,context
- 模块解析：resolve,externals
- 模块转译：module
- 后处理：optimization.mode,target
03.进阶篇：理解Loader
认识Loader:链式调用
- less-loader:实现less=>css的转换
- css-loader:将CSS包装成类似module.exports="${css}"的内容，包装后的内容符合JavaScript语法
- style-loader：将css模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签
认识Loader:其他特性
-
链式执行
-
支持异步执行
-
分normal,pitch两种模式
04.理解插件
甚至，Webpack本身的很多功能也是基于插件实现的
钩子的核心信息：
- 时机：编译过程的特定节点，Webpack会以钩子形式通知插件此刻正在发生什么事情
- 上下文：通过taptable提供的回调机制，以参数方式传递上下文信息
- 交互：在上下文参数中附带了很多存在side effect的交互接口，插件可以通过这些接口改变
05.学习方法
- 入门应用
- 理解打包流程
- 熟练掌握常用配置项、Loader、插件的使用方法，能够灵活搭建集成Vue、React、Babel、Eslint、Less、Sass、图片处理等工具的Webpack环境
- 掌握常见脚手架工具的方法，例如：Vue-cli、create-react-app、@angular/cli
- 进阶
- 理解Loader、Plugin机制，能够自行开发Webpack组件
- 理解常见性能优化手段，并能用于解决实际问题
- 理解前端工程化概念与生态现状
- 大师级
- 阅读源码，理解Webpack编译、打包原理，甚至能够参与共建
小结
这节课程学习了：
-
Webpack的作用
-
理解Webpack配置结构，学习关键配置项
-
Loader的作用与常用Loader
-
插件基本形态与作用
