Q1 说说你对webpack的理解，它解决了什么问题
A:
1 Webpack的本质
1 Webpack的本质
Webpack是一个现代JS应用的 静态模块打包工具（Module Bundler）
这里面的重点是「静态」、「模块」 和 「打包工具」
2 Webpack的核心作用
1 webpack解决的 核心问题/ webpack的核心作用
Webpack 的核心作用：模块打包（Module Bundle）
模块： 说明了 Webpack的 处理对象 打包： 说明了 Webpack的 核心功能 静态： 说明了 Webpack的 工作方式
即 模块是 webpack的输入，打包是 webpack的处理过程 和 输出结果
下面从 历史发展角度，详细介绍webpack的 发展过程
2.1 模块
1 一开始的 原始前端开发方式: 写一个HTML文件，直接在文件中引入CSS/JS 文件
2 随着前端项目越来越复杂，以上写法 开始暴露问题
- 全局变量污染，容易出现 命名冲突
- 文件依赖关系不清晰 + 文件加载顺序需要 手动管理
- 文件请求过多，导致请求时间变长
<!-- 如果顺序错了，整个页面就有可能报错 -->
<script src="jquery.js"></script>
<script src="main.js"></script>
3 为了解决 以上部分问题，出现了 「模块化」的规范
- 模块化 把项目代码拆分为 功能积木，每个模块 都有 独立的作用域，避免 全局变量污染
- 模块化 通过「导入导出」 语法，显式声明了 文件之间的依赖关系
- 注意：模块化规范本身 只提供了依赖声明的语法，需要打包工具（如webpack），来实际处理这些依赖关系 + 管理加载顺序
// 没有模块化规范时的 index.js：功能混杂 + 依赖关系不清晰
function 功能1() {}
function 功能2() {}
function 功能3() {}
// 使用模块化规范后的 index.js：功能拆分 + 显式声明了 依赖文件
import 功能1 from './功能1.js'
import 功能2 from './功能2.js'
import { 功能3 } from './功能3.js'
以上就是「静态模块打包工具」 里 「模块」的含义：
- webpack 处理的对象单位是 模块
2.2 打包
1 虽然出现了 「模块化」规范，但是在具体使用时，出现了以下问题
- 「模块化」规范 有多种实现方式，实现方式不统一
- 浏览器不支持直接使用「模块化」规范 语法
// 开发时，我们用模块化写代码：
// user.js
export function login() { /*...*/ }
// cart.js
import { login } from './user.js'
// 但浏览器并不认识这种写法！
// <script type="module"> 虽然现在支持，但兼容性和性能都有问题
2 webpack通过「打包」， 解决了模块化 未解决+新出现的 问题
「打包」的流程概述
- 分析依赖：从入口文件开始，生成依赖图
- 转换代码：处理模块化语法，转化为浏览器能理解的格式
- 合并代码：按照依赖关系，把所有模块代码合并到一起，确保执行顺序正确
也就是说，通过打包过程，解决了「文件依赖关系需要手动管理」+ 「文件请求过多」+ 「模块化规范无法在浏览器中运行」的问题
以上就是「静态模块打包工具」 里 「打包」的含义：
- 自动处理依赖关系 + 统一模块化规范代码 + 合并文件
2.3 静态
1 静态，说明了 Webpack 的工作方式
- 静态：在代码编写阶段，就确定了 依赖关系
- 动态：代码运行时才确定依赖关系
即，依赖关系不受 外部变量的影响，在代码编写阶段，就确定了
2 静态分析的优势: 在打包时就可以知道 所有依赖关系
- 删除未使用的代码（Tree Shaking）
- 优化模块顺序
- 分割代码块
3 需要注意的是， Webpack 也能支持 动态导入
3 Webpack的延伸功能
1 webpack的核心功能：模块打包
2 webpack的延伸功能
- Loader: 把 非JS的资源文件 也能转换为模块
- Plugin: 对 打包过程功能 进行扩展
- 开发效率: devServer/ HRM/ sourceMap ...
- 性能优化: 代码分割/ tree shaking ...
- 工程化支持: 代码检查/ 多环境支持/ 自动部署 ...
