这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天。
本篇笔记是对今天青训营的录播课Webpack知识体系课程的归纳总结及个人感悟。
一，什么是Webpack
前端由各种资源构成，为了管理这些资源，出现了许多工程化工具（例如vite、webpack）
webpack本质上是一种前端资源编译、打包工具
二，为什么要学习Webpack？
- 理解前端工程化概念、工具、目标
- 一个团队总要有那么几个人熟悉Webpack、某种程度上可以成为个人的核心竞争力
- 高阶前端必经之路
三，如何使用Webpack
- 安装：npm i -D webpack webpack-cli
- 配置：在config.js文件中对webpack进行配置
- 执行：npx webpack执行编译命令
webpack核心流程：
- 入口处理：从entry文件开始，启动编译流程
- 依赖解析：从entry文件开始，根据require或import等语句找到依赖资源
- 资源解析：根据module配置，调用资源转移器，将png、oss等非标准JS资源转译为JS内容被
- 资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
使用webpack分为流程类和工具类两部分：
流程类：作用于流程中某个/若干环节，直接影响打包效果的配置项
工具类：主流程之外，提供更多工程化能力的配置项
使用：
- 声明入口entry
- 声明产物出口output
- 运行npx webpack
使用webpack-处理CSS：
- 安装loader
- 添加module处理css文件
使用webpack-接入Babel：
- 安装依赖
- 声明产物出口output
- 执行npx webpack
使用webpack-生成html：
- 安装依赖
- 声明产物出口output
- 执行npx webpack
四，Loader
为了处理非标准JS资源，设计出资源翻译模块-loader，用于将资源翻译成标准JS
使用：
- 安装loader
- 添加module处理css文件
特性：
- 链式执行
- 支持异步执行
- 分normal、pitch两种模式
