1 最简核心配置
Q1 webpack的 最简核心配置组成 是什么
A:
-
entry: 指定打包的入口文件，webpack执行构建时会从entry文件开始 后续流程
-
output: 指定 打包后的输出文件 相关配置
- path: 指定打包的 输出文件目录
- filename: 指定打包的 输出文件名称， 可以通过 [name] 占位符支持 多入口打包输出
-
mode: 指定打包的模式：development/production
-
module: 指定模块的 处理规则
- 在 Webpack 里一切皆模块，一个模块对应着一个文件
- rules: 一般用于 配置Loader
- plugins: 配置插件
各个概念的 在webpack 打包流程中的位置：
Webpack 启动后会从
Entry里配置的Module, 开始递归解析 Entry 依赖的所有 Module。 每找到一个 Module， 就会根据配置的Loader去找出对应的转换规则，对 Module 进行转换后，再解析出当前 Module 依赖的 Module。 这些模块会以 Entry 为单位进行分组，一个 Entry 和其所有依赖的 Module 被分到一个组, 也就是一个Chunk。 最后 Webpack 会把所有 Chunk 转换成 文件输出。 在整个流程中 Webpack 会在恰当的时机执行Plugin里定义的逻辑
Q2 webpack里 entry的作用
A:
1 entry: 用于 指定打包的入口文件
2 webpack 会从指定的entry文件开始，找到它所有依赖模块(即一棵依赖树)，进行打包
3 entry的值 可以是一个 字符串/对象
- 字符串: 指定一个入口文件
- 对象: 指定多个入口文件，并且可以指定不同的 打包规则
3.2 单入口(SPA) 和 多入口(MPA) 各自的适用场景
- SPA: 更适用于 灵活变更/ 重交互/ 重视离线功能/ 整体性能
- MPA: 更适用于 安全稳定/ 重内容/ 重视SEO/ 首屏性能
2 module + chunk + bundle 含义
Q1 Webpack里 的 bundle、chunk、module，分别是什么，各自有什么作用，区别是什么
A:
1 Module（模块）
- 是 webpack 中最小的单位，每一个源文件 就是一个模块
- 模块可以是 任何类型的文件（.js、.css、.png等）
- 可以被其他模块 导入导出， 从而形成 模块间的依赖关系
核心作用：功能单一 + 代码复用 + 避免命名冲突
2 Chunk（代码块）
- chunk是 1个/n个依赖模块 的集合
- 是 webpack 打包过程中的 中间产物
chunk 的产生方式/类型：
- 入口 chunk：通过 entry 配置产生，由 入口文件 及其 依赖模块组成
- 子 chunk：通过动态导入产生（import()）
- 公共 chunk：通过代码分割产生（splitChunks）
作用：实现 代码分割 + 按需加载 + 抽离公共代码
3 Bundle（打包结果）
- 是把 chunk 经过编译、优化后的 最终产出文件
- 一般情况下，一个 chunk 会生成一个 bundle
作用：是 可部署/可被浏览器直接运行的 文件
4 module VS chunk VS bundle 的区别：
- module: 开发时写的源文件
- chunk: webpack 处理时的中间产物
- bundle: 最终输出给用户的文件
用伪代码 举例：
// 源代码（modules）
index.js
utils.js
styles.css
// 打包过程中（chunks）
main-chunk（包含index.js和utils.js）
vendors-chunk（包含node_modules中的代码）
// 最终产物（bundles）
main.bundle.js
vendors.bundle.js
styles.bundle.css
5.1 Asset（资源）
- 是 webpack 5 中引入的概念
- 表示最终输出的文件，包括 bundle 和 其他资源文件（如图片、字体等）
- 可以通过 asset modules 配置来处理
它们之间的关系是：
Module(源文件)
|
Chunk(打包过程)
|
Asset(输出文件): 包括 Bundle 和 其他资源文件(图片/字体等)
5.2 Bundle vs Asset 的区别
- Bundle: 特指 JS 打包后的文件
- Asset: 是更广泛的概念，包括所有类型的输出文件（JS bundles、图片、字体、CSS等）
5.3 webpack5 引入 Asset概念 的原因
- 配置简化: 不需要配置多个 loader
- 性能优化: 内置的资源处理更高效
- 更好的类型支持: 统一的 资源模块类型系统
- 更精细的控制: 可以更容易地 控制资源的 输出方式
