Working with Webpack与Webpack一起工作

观看完本视频后，您将能够：

• 解释 Webpack 配置的重要性
• 识别 资产在配置文件中的处理方式
• 讨论 代码分割及其三种实现方式
• 解释 Preload 和 Prefetch 在资源加载中的作用
• 描述 Webpack的三种主要配置模式

---

Webpack的功能与配置需求

Webpack 是一个为 Web 应用程序打包的 模块打包工具，它能够将 JavaScript 代码打包、压缩，并转译为浏览器友好的代码。Webpack 假设您的代码从 src/index.js 开始，并默认将其打包到 dist/main.js。

为什么需要配置？

Webpack 配置有助于确定代码是否应被压缩以提高执行速度，或者是否应包含源映射以便更好地进行错误追踪。对于结构复杂的项目，Webpack 提供了配置文件，避免了需要在终端手动输入多个命令。

示例配置文件：

module.exports = {
  // 配置内容
};

该文件输出一个对象，Webpack 会根据该对象进行打包。上述配置告诉 Webpack 在开发模式下运行，输出的代码包含注释和非压缩的代码。

---

Webpack中的资产管理

在开发过程中，项目通常包含 图片、字体、图标 等资产。在 Webpack 4 中，我们需要安装一个或多个加载器（loaders）来处理这些资产。但在 Webpack 5 中，由于引入了 内置的资产模块（Asset Modules），不再需要额外的加载器。

资产类型在配置文件中的处理方式

Webpack 5 的资产模块支持直接处理这些文件，避免了手动配置多个加载器。

---

代码分割（Code Splitting）

Webpack 提供了 代码分割（Code Splitting） 功能，以实现更小的打包文件，并控制资源加载的优先级。这有助于加快初始加载时间，让用户更快地与应用进行交互。

代码分割的三种实现方式

1. 入口点（Entry Points）：通过手动配置入口，进行代码分割。
2. 去重（Prevent Duplication）：通过 SplitChunksPlugin 移除重复的代码并分割代码块。
3. 动态导入（Dynamic Imports）：通过模块内的内联函数调用来分割代码。

代码分割不仅减小了主打包文件的大小，还优化了资源的加载顺序。

---

Preload 和 Prefetch

1.Preload（预加载）

Preload 是一种声明式请求，指示浏览器提前加载一个资源而不会中断文档的加载过程。这些资源是当前导航所需的，浏览器会并行加载它们。

2.Prefetch（预取）

Prefetch 指示浏览器某个资源可能会在将来的导航中使用，浏览器决定是否加载这些资源。这些资源是未来导航所需的，在父块加载完成后才会开始加载。

开发者需要谨慎使用 Preload 和 Prefetch，因为不当配置可能会导致性能问题。

---

Webpack的三种配置模式

Webpack 配置模式指导 Webpack 使用其内置的优化功能，常见的三种模式包括：

开发模式（Development）

• 开发模式 用于应用的开发阶段，Webpack 会生成源映射（source maps），将生成的代码与原始源代码关联，便于调试和修复错误。

生产模式（Production）

• 生产模式 是默认模式，适用于生成用于生产环境的最终代码。Webpack 会尽可能优化构建，自动压缩代码并使用 TerserPlugin 进行代码压缩，支持 tree shaking 和 性能提示 等优化。

无优化模式（None）

• 无优化模式 不会自动应用任何优化选项。适用于开发过程中需要更大灵活性或者特定需求的情况。

---

总结

在本视频中，您学习了：

• Webpack 作为 Web 应用程序的模块打包工具。
• Webpack 配置 的重要性，以及如何通过配置文件进行管理。
• 资产管理 及其在配置文件中的处理方式。
• 代码分割 及其三种实现方式。
• Preload 和 Prefetch 的功能和使用场景。
• Webpack的三种主要配置模式：开发模式、生产模式和无优化模式。

这些知识将帮助您更高效地使用 Webpack，优化项目构建和资源管理。