为什们要学习Webpack
- 理解前端“工程化“概念、工具、目标
- 一个团队总要有那么几个人首席
Webpack
, 某种程度上可以 成为个人的核心竞争力 - 高阶前端必经之路
一、什么是Webpack
前端项目于由神门构成?---资源
一个前端项目包括多种资源:PNG、JS、TS、css、Less、Vue...
在早期我们需要手动去管理这些资源,但开发效率相对现在相差较大,具体体现在:
- 依赖手工,比如优50多个JS文件进行操作,过程繁琐
- 当代码文件之间有依赖的时候,就得严格按照以来顺序书写
- 比较难接入Less、Sass等工具
- JS、图片、CSS资源管经理模型不一致等等
基于这些问题,就诞生出里各种各样的工程化工具,某种程度上说,正式这些工具的出现,才有了”前端工程“这一概念
一些前端工程化工具
webpack
VIte
Gulp
rollup.js
browserify等
本质:一种前端资源编译打包工具
二、使用Webpack---示例
-
安装
npm i -D webpack webpack-cli
-
编辑配置文件
-
执行编译命令
npx webpack
核心流程(极度简化版)
- 入口处理
从entry文件开始,启动编译流程
-
依赖解析
从enrtry文件开始,更具require或者import等语句找到依赖资源
-
资源解析
根据module配置,调用资源转移器,将png、css等非标准JS资源转译为JS内容
-
资源合并打包
将转移后的资源内容合并打包为可直接在浏览器运行的JS文件
-
递归调用2、3,直到所有资源处理完毕
工作(模块化+一致性)
- 多个文件资源合并成为一个,减少http请求书
- 支持模块化开发
- 支持高级JS特性
- 支持TS、CoffeScript方言
- 同意图片、css、字体等其他资源的处理模型
- Etc...
核心:配置(流程类和工具类)
- 流程类:作用于流程中莫格或若干个环节,直接影响打包效果的配置项
- 输入:
- entry
- context
- 模块解析
- resolve
- externals
- 模块转译
- module
- 后处理
- optimization
- mode
- target
参考资料
- Css-loader
- Webpack 原理系列七:如何编写loader
- style-loader
- Bable-loader
- bable官网
- @bable/preset-env
- @bable/preset-react
- @bable/preset-typescript
- html-webpack-plugin
装用配置项:
-
entry/putput
-
module/plugins
-
mode
-
watch/devServer/devtol
-
工具类:主流程之外,提供更多工程化能力的配置项
热更新:HMR
-
开启:
-
启动
npx webpack serve
Tree-Shaking
功能:对为用到、不可到达、执行结果不会被用到、代码只读不写等类似无用的操作进行处理
开启:
mode: "production"
optimization.usedExports:true
PS :对工具类库如Lodash有奇效
其他工具
- 缓存
- Souremap
- 性能监控
- 日志
- 代码压缩
- 分包
- ···
三、进阶篇:理解Loader
Lodaer:为了处理非标准JS资源,设计初资源翻译模块,用于将资源翻译为标准JS
特点:
- 链式调用
- 支持异步执行
- 分normal、pitch两种模式
四、进阶篇:理解插件
webpack编译流程
理解插件
钩子的核心信息
- 时机:编译过程的特定节点,Webpack会以 钩子形式通知插件此刻正在发生什么事情
- 上下文:通过tapable提供的回调机制,以参 数方式传递上下文信息;
- 交互:在上下文参数对象中附带了很多存在 side effect 的交互接口,插件可以通过这些接口改变
参考