这是我参与「第四届青训营」笔记创作活动的的第 5 天
什么是Webapck
首先了解一个概念，前端项目由什么构成？————当然是各种各样的资源，我们可以对这些资源进行手动管理。 但是，当我们用到的资源多起来时，就会有一些小问题：
- 依赖手工，比如有50个js文件...操作，过程繁琐
- 当代码之间有依赖的时候，就得严格依赖顺序写
- 开发与生产环境一致，难以接入js与ts的新特性
- 比较难接入Less、Sass等工具
- js、图片、Css资源管理模型不一致 为了解决这些问题，各种各样的前端工程化工具便出现了，Webapck就是其中之一，其本质是一种前端资源编译、打包工具
使用Webapck
示例
- 安装
执行命令npm install webpack webpack-cli -D
- 编辑配置文件webapck.config.js
3.执行编译命令
npx webapck
Webapck打包流程
-
入口处理：从 “entry” 文件开始，启动编译流程。
-
依赖解析：从 “entry” 文件开始，根据 “require” 和 “import” 等语句找到依赖资源。
-
资源解析：根据 “module” 配置，调用资源转移器，将 png、css 等非标准 JavaScript 资源转译为 JavaScript 内容。
-
资源合并并打包：将转译后的资源内容合并打包为可直接在浏览器运行的 JavaScript 文件。
- 在打包资源的过程中找到新的资源会递归进行 2、3 步骤。
Webapck属性
关于Webpack的使用方法，基本都围绕”配置"展开，而这些配置大致可划分为两类:
- 流程类:作用于流程中某个or若干个环节，直接影响打包效果的配置项
- 工具类:主流程之外，提供更多工程化能力的配置项
