Webpack 开发快速入门

WebPack详细入门教程（一）之简介
Webpack详细入门教程（二）之安装配置
WebPack详细入门教程（三）之loader加载器
Webpack详细入门教程（四）之Source Maps调试
Webpack详细入门教程（五）之构建本地服务器
WebPack详细入门教程（六）之图片打包处理
WebPack详细入门教程（七）之css和sass的处理

原创超清的 Webpack2 视频教程

Vite 开发快速入门

---

Webpack的启动过程

1. 初始化参数

   从配置文件（默认为webpack.config.js）和 Shell语句 中读取与合并参数，得出最终的参数。

   如果使用命令行工具（如npm script或npx），则会将命令行参数传递给webpack()函数，该函数是webpack的主要入口点。

2. 入口点确定

   Webpack从配置文件中读取入口点（entry），这些入口点通常是项目所有的入口文件，如src/index.js。

   这些入口文件是webpack编译的起点。

3. 分析依赖(解析依赖模块)

   Webpack从入口文件开始，使用解析器（resolver）来解析模块。解析器会查找模块的位置并读取模块的内容。

   当Webpack遇到import、require等模块导入语句时，它会将这些语句作为依赖记录下来，并递归地解析这些依赖模块。

4. 构建依赖图

   在解析模块的过程中，Webpack会构建一个依赖图（dependency graph）。这个图是一个表示项目中所有模块和它们之间依赖关系的图。

   每个模块在图中都是一个节点，模块之间的依赖关系通过边来表示。

5. 编译代码(处理Loader)

   在解析模块的过程中，如果模块的内容不是JavaScript，或者需要进行转换（如将TypeScript转换为JavaScript，将CSS转换为JavaScript等），Webpack会使用配置的Loader来处理这些模块。

   Loader可以将模块的内容从一种格式转换为另一种格式，以便Webpack能够理解和处理。

6. 插件介入

   在分析依赖的过程中，Webpack的插件系统允许插件介入并修改依赖图。

   插件可以添加、删除或修改图中的节点和边，从而改变Webpack对依赖关系的理解。

7. 优化和分割

   在构建依赖图之后，Webpack会进行一些优化和分割操作，如代码分割（code splitting）、公共库分离（commons chunk splitting）等。

   这些操作可以进一步减少最终构建文件的大小，提高加载性能。

8. 打包模块(生成资源)

   在所有依赖都被分析并优化之后，Webpack会根据配置将模块打包成最终的资源文件（如JavaScript文件、CSS文件等）。

   这些资源文件包含了项目中所有必要的代码和依赖，并且已经过优化和压缩，以便在浏览器中快速加载和执行。

   .

简单来讲：

1. 分析依赖

   Webpack 需要从入口文件开始，递归地解析和加载项目中的所有模块，分析它们的依赖关系，并构建出一个依赖图（Dependency Graph）。这个过程可能需要花费一些时间，特别是对于大型项目或具有复杂依赖关系的项目。

2. 编译代码

   在构建依赖图的过程中，Webpack 会遇到各种不同类型的文件（如 JavaScript、CSS、图片等）。对于某些文件，Webpack 可能需要使用 loader 进行预处理或转换（如将 ES6 代码转换为 ES5 代码，或将 Sass 代码转换为 CSS 代码）。这些编译过程也需要一定的时间。

3. 打包模块

   在解析完所有依赖并编译完代码后，Webpack 会将这些模块打包成一个或多个 bundle。打包过程包括将模块代码合并、添加必要的加载器代码、优化代码等步骤。这个过程同样需要一定的时间。