这是我参与「第四届青训营 」笔记创作活动的第2天
什么是Webpack
我们前端项目由很多的一些资源构成，如PNG、JPG、GIF、JS、TS、CSS、Less等资源.
对于这些资源，我们可以手动去管理，但这会带来一系列的问题，如：
- 依赖手工，比如有50个JS文件，操作过程繁琐；
- 开发与生产环境一致，难以接入TS或JS新特性
- 比较难接入Less、Sass等工具
- JS、图片、CSS资源管理模型不一致
这些都是手动管理所导致的突出问题，这严重影响到了开发的效率
接着出现了很多的工程化工具，如Webpack、Vite、rollup、Gulp等，某种程度上正是这些工具的出现，才有了"前端工程"这一概念.
什么是Webpack
Webpack : 前端资源编译、打包工具
- 支持Babel、Eslint、TS、Less、Sass
- 支持模块化处理css、图片等资源文件
- 支持代码分离
- 支持Tree-shaking
- ...
Webpack打包核心流程
入口处理 ==》 依赖解析 ==》 资源解析 ==》 资源合并打包
step1：入口处理 从entry文件开始，启动编译流程
step2：依赖解析 从entry文件开始，根据require or import 等语句找到依赖资源
step3：资源解析 根据module配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容
step4：资源合并打包 将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
注意： 递归调用step2，step3，直到所有资源处理完毕
关于Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类：
- 流程类： 作用于流程中某个or 若干个环节，直接影响打包效果的配置项
- 工具类： 主流程之外，提供更多工程化能力的配置项
使用 Webpack
安装依赖 ==》 编辑配置文件 ==》 执行编译命令
最重要的是编辑配置文件这一步骤
step1: 安装： npm i -D webpack webpack-cli
step2: 编辑配置文件 webpack.config.js
step3: 执行编译命令 npx webpack
