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

为什么要学习Webpack

1. 理解前端“工程化”概念，工具，目标
2. 一个团队总要有几个人熟悉Webpack，在某种程度上可以成为个人的核心竞争力
3. 高端前端的必经之路

什么是Webpack

前端是由各式各样的资源组成的：图片（PNG,JPG）, WEBP, JS, CSS，TS，Vue, Sass......

那开发人员是如何管理这些资源？

手动？

• 如果有50个js文件，操作过程繁琐
• 当代码文件之间有依赖时，就得严格按照依赖顺序书写
• 开发与生产环境一致，难以接入TS或JS新特性
• 比较难接入Less，Sass等工具
• JS，图片，CSS资源管理模型不一致

看的出来以上问题十分棘手，对开发效率影响巨大，直到下面这些工具的出现。

工程化工具！ 之后出现了很多工程化工具，比如，Webpack，Vite，rollup.js等

以Webpack为例，Webpack本质上是一种前端资源编译，打包工具。它可以

• 多份资源打包成一个Bundle
• 支持Less，Sass，TS，等
• 支持模块化处理css，图片等资源文件
• 支持HMR + 开发服务器
• 支持持续监听，持续构建
• 支持代码分离
• 支持Tree-shaking
• ...

使用Webpack

范例

1. 安装

npm i -D webpack webpack-cli

2. 编辑配置文件

3. 执行编译命令 ``` npx webpack ```

核心流程极简版

1. 入口处理：

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

2. 依赖解析：

从'entry'文件开始，根据'require' or 'import'等语句找到依赖资源

3. 资源解析：

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

4. 递归调用2.3步骤，直到所有资源处理完毕

5. 资源合并打包：

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