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

什么是Webpack

• 手工管理依赖过于复杂，需要严格的顺序
• 无法处理TS
• 无法接入Less或Sass

Webpack是前端资源编译、打包工具。在esm出现之前需要用它来进行打包。

• 多份资源打包成一个Bundle
• 支持Babel、Eslint、TS、Less等
• 支持模块化处理css、图片等资源文件
• 支持HMR：快速开发
• 支持CI/CD：快速迭代
• 支持tree-shaking：删除无用代码，优化打包文件大小
• 支持sourcemap

HMR等似乎是后期才加入的内容？

webpack打包核心流程

安装、编写config、npx webpack运行。

1. 入口处理：从entry开始，启动编译流程。
2. 依赖解析： 从entry开始，根据require或import等语句找到依赖资源。
3. 资源解析：根据module配置，调用资源转移器，将非标准js资源转译为JS内容
4. 资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的JS文件。

递归调用2、3步直到无其它未处理资源。

---

使用频率较高的参数：

• entry/output
• module/plugin
• mode
• watch/devServer/devtools

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

Loader

webpack只能识别Js文件。

loader用于处理非标准js资源，将资源翻译为Js。需要npm安装loader并在配置文件的module配置项中处理。

• less-loader: less => css
• css-loader: "${css}"
• style-loader: 将css模块包裹模块，并在运行时调用injectStyle注入。

Plugin

插件架构：对扩展开放，对修改封闭。

在特定时间点以hook形式通知插件此刻正在发生什么 上下文: tapable提供的回调机制，以参数方式传递上下文。 交互： context对象附加了存在side effect的接口，插件通过接口改变

总结

webpack将多个文件资源合并成一个，减少了http请求数。在esm称为标准前，支持了模块化开发，babel等允许提前支持高级js特性，支持typescript等方言，统一了静态资源的处理模型等。说得好！我选择vite