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）和自动刷新，以提高开发效率。