这是我参与「第四届青训营 」笔记创作活动的第9天
什么是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. . .
使用
关于Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类:
- 流程类:作用于流程中某个or若干个环节，直接影响打包效果的配置项
- 工具类:主流程之外，提供更多工程化能力的配置项
流程类配置
配置总览
按使用频率:
entry/outputmodule/pluginsmodewatch/devServer/devtool
最基础的使用
-
声明入口
entry -
声明产物出口
output -
运行
npx webpack
处理CSS
-
安装Loader
-
添加
module处理css 文件
接入Babel
-
安装依赖
-
声明产物出口output
-
执行
npx webpack
生成 HTML
-
安装依赖
-
声明产物出口
output -
执行
npx webpack
工具化
HMR
Hot Module Replacement——模块热替换
-
开启HMR
-
启动 Webpack
HMR 原理全解析：
mp.weixin.qq.com/s/cbYMpuc4h…
Tree-Shaking
Tree-Shaking-树摇，用于删除 Dead Code
| Dead Code | Tree-shaking |
|---|---|
| 代码没有被用到,不可到达 | 模块导出了,但未被其它模块使用 |
| 代码的执行结果不会被用到 | |
| 代码只读不写 |
开启tree-shaking :
-
mode: “production” -
optimization.usedExports: true*
PS:对工具类库如Lodash有奇效
其它工具:
- 缓存
- Sourcemap
- 性能监控
- 日志
- 代码压缩
- 分包
- ...
理解Loader
Webpack只认识JS，为了处理非标准JS资源，设计出资源翻译模块——Loader，用于将资源翻译为标准JS。
使用Loader
1.安装 Loader
2.添加module处理css文件
认识 Loader:链式调用
- less-loader:实现less => css的转换
- css-loader:将CSS包装成类似module.exports="${css}”的内容，包装后的内容符合JavaScript语法
- style-loader:将css模块包进require语句,并在运行时调用injectStyle等函数将内容注入到页面的style标签
认识 Loader:其他特性
特点︰
- 链式执行
- 支持异步执行
- 分normal、pitch 两种模式
参考：mp.weixin.qq.com/s/TPWcB4MfV…
如何编写Loader
参考：mp.weixin.qq.com/s/TPWcB4MfV…
常见Loader
站在使用角度,建议掌握这些常见Loader的功能、配置方法
理解插件
插件是什么?为什么这么设计? 很多知名工具,如:
- VS Code、Web Storm、Chrome、Firefox
- Babel、Webpack、Rollup、Eslint
- Vue、Redux、Quill、Axios 等等，都设计了所谓插件架构，为什么?
这是一个特别复杂的过程，那么∶
- 新人需要了解整个流程细节，上手成本高
- 功能迭代成本高，牵一发动全身
- 功能僵化，作为开源项目而言缺乏成长性
- ... 心智成本高 => 可维护性低 => 生命力弱
插件架构精髓:对扩展开放,对修改封闭
写插件：
首先:插件围绕钩子展开
钩子的核心信息:
- 时机:编译过程的特定节点，Webpack会以钩子形式通知插件此刻正在发生什么事情;
- 上下文:通过 tapable提供的回调机制,以参数方式传递上下文信息;
- 交互:在上下文参数对象中附带了很多存在side effect的交互接口，插件可以通过这些接口改变
Webpack知识体系
如何学习Webpack
入门级:学会灵活应用
- 理解打包流程
- 熟练掌握常用配置项、Loader、插件的使用方法,能够灵活搭建集成Vue、React、Babel、Eslint、Less、Sass、图片处理等工具的Webpack环境
- 掌握常见脚手架工具的用法，例如:Vue-cli、create- react-app、Qangular/cli
进阶:学会扩展Webpack
- 理解Loader、 Plugin机制,能够自行开发Webpack组件
- 理解常见性能优化手段,并能用于解决实际问题
- 理解前端工程化概念与生态现状
大师:源码级理解Webpack打包编译原理
- 阅读源码，理解 Webpack编译、打包原理,甚至能够参与共建
