Webpack浅记

为什们要学习Webpack

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

一、什么是Webpack

前端项目于由神门构成？---资源

一个前端项目包括多种资源：PNG、JS、TS、css、Less、Vue...

在早期我们需要手动去管理这些资源，但开发效率相对现在相差较大，具体体现在：

• 依赖手工，比如优50多个JS文件进行操作，过程繁琐
• 当代码文件之间有依赖的时候，就得严格按照以来顺序书写
• 比较难接入Less、Sass等工具
• JS、图片、CSS资源管经理模型不一致等等

基于这些问题，就诞生出里各种各样的工程化工具，某种程度上说，正式这些工具的出现，才有了”前端工程“这一概念

一些前端工程化工具

• webpack
• VIte
• Gulp
• rollup.js
• browserify等

本质：一种前端资源编译打包工具

二、使用Webpack---示例

1. 安装

   npm i -D webpack webpack-cli
   

2. 编辑配置文件

3. 执行编译命令

   npx webpack
   

核心流程（极度简化版）

1. 入口处理

从entry文件开始，启动编译流程

1. 依赖解析

   从enrtry文件开始，更具require或者import等语句找到依赖资源

2. 资源解析

   根据module配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容

3. 资源合并打包

   将转移后的资源内容合并打包为可直接在浏览器运行的JS文件

4. 递归调用2、3，直到所有资源处理完毕

工作（模块化+一致性）

1. 多个文件资源合并成为一个，减少http请求书
2. 支持模块化开发
3. 支持高级JS特性
4. 支持TS、CoffeScript方言
5. 同意图片、css、字体等其他资源的处理模型
6. Etc...

---

核心：配置（流程类和工具类）

• 流程类：作用于流程中莫格或若干个环节，直接影响打包效果的配置项

1. 输入：
   • entry
   • context
2. 模块解析
   • resolve
   • externals
3. 模块转译
   • module
4. 后处理
   • 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

1. 开启：

   

2. 启动

   npx webpack serve
   

3. 参考Webpack 原理系列十：HMR 原理全解析

Tree-Shaking

功能：对为用到、不可到达、执行结果不会被用到、代码只读不写等类似无用的操作进行处理

开启:

mode: "production"
optimization.usedExports:true

PS :对工具类库如Lodash有奇效

其他工具

• 缓存
• Souremap
• 性能监控
• 日志
• 代码压缩
• 分包
• ···

三、进阶篇：理解Loader

Lodaer:为了处理非标准JS资源，设计初资源翻译模块，用于将资源翻译为标准JS

特点：

• 链式调用
• 支持异步执行
• 分normal、pitch两种模式

参考：Webpack 原理系列七：如何编写loader

四、进阶篇：理解插件

webpack编译流程 

理解插件

钩子的核心信息

1. 时机:编译过程的特定节点，Webpack会以 钩子形式通知插件此刻正在发生什么事情
2. 上下文:通过tapable提供的回调机制,以参 数方式传递上下文信息;
3. 交互:在上下文参数对象中附带了很多存在 side effect 的交互接口，插件可以通过这些接口改变

参考

• [源码解读] Webpack 插件架构深度讲解
• [万字总结] 一文吃透 Webpack 核心原理

五、相关资料

• 公众号：Tecvan
• Awesome Webpack4+ 优秀学习资源
• 深入浅出webpack
• Table of Contents