构建webpack知识体系 ｜ 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天

为什么要学习webpack

• 理解前端“工程化”概念、工具、目标
• 一个团队总要有几个会的
• 某种程度上属于个人核心竞争力
• 高阶前端必学

什么是webpack

前端由各种资源构成，比如png,js,jsx,sass,css。

早期项目的代码文件资源等需要手动管理，管理过程繁琐而复杂，影响开发效率。

后面出现了Gulp,rullup,browserify等，熟悉一些的像webpack,Vite。

webpack本质上是一种前端资源编译、打包工具。多份资源打包成一个Bundle，支持Eslint,TS,Babel……等黑科技。

webpack打包核心流程，使用webpack

安装 -> 编辑配置文件 -> 执行编译命令

核心流程（递归调用2-3流程，直到所有资源处理完毕）：

入口处理 -> 依赖解析 -> 资源解析 -> 资源合并打包

webpack的使用围绕配置进行，简单说就是学习写配置。分为两类：

• 流程类，作用于流程中某些环节；
  • 输入：entry, context
  • 模块解析：resolve, externals
  • 模块转义：module
  • 后处理：optimiaztion, mode, target
• 工具类，提供更多工程化能力的配置项。
  • HMR模块热替换
  • Tree-Shaking用于删除dead code
  • 缓存、Sourcemap、性能监控、日志、代码压缩、分包

Loader组件

webpack只认识js代码，处理非js资源时需要专门资源翻译模块loader，翻译为标准js。

安装Loader -> 添加module配置处理css文件,"style-loader","css-loader","less-loader"

• style-loader
  • 将less转换为css
• css-loader
  • 将css包装成类似module.exports="${css}"的东西，符合js语法
• less-loader
  • 将css包进require，运行时调用injectStyle等函数注入到页面的style标签

链式执行

写一个loader？

• source 输入源码
• sourcemap 可能存在的sourcemap
• data 一些额外信息
• 返回代码字符串

Plugin组件

webpack很多能力是基于插件实现的

很多的工具都设计了插件架构:

• vscode, web Storm, Chrome, Firefox
• Babel, Webpack, Rollup, Eslint
• Vue, Redux, Quill, Axios

webpack实现是个相当复杂的过程，新人理解成本高，功能迭代成本高，作为开源项目不容易有活力。有了插件架构形成“对外开放，对内封闭”的特性。

插件基于钩子hook编写，webpack会在钩子里通知插件在干嘛，通过tapable传递上下文，使用存在的side effect交互

如何学习webpack

巨大的知识体系图：gitmind.cn/app/docs/m1…

1. 入门应用
   1. 理解打包流程，灵活搭建集成Vue, React, Babel, Eslint, Less...的webpack环境
   2. 掌握常见脚手架用法：vue-cli, create-react-app, @angular/cli
2. 进阶
   1. 理解loader, Plugin机制，自行开发webpack组件
   2. 理解常见优化手法，应用到实际
   3. 理解前端工程化概念与生态现状
3. 大师（不用想了……我太菜了……
   1. 阅读源码，理解webpack编译，打包原理，甚至参与webpack

适合新手的知识图