https://github.com/gavinbirkhoff/tiny-webpack

Last synced: about 1 year ago
JSON representation

手写webpack核心功能

README

# tiny-webpack

手写 webpack 核心功能

1. **入口起点（Entry Point）：**

- Webpack 从一个或多个入口点开始，这是指定构建过程从哪个文件开始的地方。入口点包含你的应用程序的起始代码。

2. **模块解析（Module Resolution）：**

- Webpack 会从入口点出发，递归地构建出应用程序的所有模块依赖关系。对于每个模块，Webpack 会解析它的依赖关系，形成一个依赖图。

3. **加载器（Loaders）：**

- 当 Webpack 遇到非 JavaScript 文件（例如 CSS、图片、或其他资源）时，它使用加载器将这些文件转换为有效的模块。加载器允许你在导入这些文件时预处理它们。加载器在`module.rules`配置中定义，按照规则应用于相应的文件类型。

4. **插件（Plugins）：**

- 插件用于执行一些更广泛的任务，如代码优化、资源管理、注入环境变量等。插件可以在整个构建过程中的不同阶段执行，并对 Webpack 的输出结果进行修改。插件的配置通常在`plugins`数组中定义。

5. **输出（Output）：**

- Webpack 将构建后的模块输出为一个或多个文件，这称为输出文件。输出文件的配置包括文件名、路径、代码分割等，这些配置项在`output`属性中定义。

6. **Chunk 和 Code Splitting：**

- Webpack 支持代码分割，允许将代码分割为多个块（Chunks）。这有助于优化加载时间，特别是在大型应用中。Webpack 还支持动态导入，允许在运行时按需加载模块。

7. **最终输出（Final Output）：**

- 构建过程完成后，Webpack 会生成最终的输出文件，这包括主输出文件以及可能的其他块、资源文件等。

8. **开发服务器（Development Server）：**
- 在开发阶段，Webpack 提供一个开发服务器，支持热模块替换（Hot Module Replacement）和自动刷新，以提高开发效率。