概括

Webpack 的主要功能是将项目中的各种模块（如 JavaScript、CSS、图片等）根据依赖关系打包成一个或多个静态资源文件，并提供代码转换、优化及丰富的插件扩展功能 ‌‌

主要功能

1、模块打包

Webpack 将项目中的所有模块（如 JavaScript、CSS、图片等）根据依赖关系打包成一个或多个静态资源文件。它通过依赖管理功能，分析模块之间的依赖关系，并将所有依赖的模块整合到最终的打包结果中。

2、依赖管理

Webpack 可以分析模块之间的依赖关系，并根据配置的入口文件找出所有依赖的模块，将其整合到打包结果中。

3、文件转换

Webpack 本身只能处理 JavaScript 模块，但通过加载器（Loader），可以将其他类型的文件（如 CSS、LESS、图片等）转换为有效的模块，使其能够被打包到最终的结果中。

4、代码拆分

Webpack 支持将代码拆分成多个模块，按需加载，实现按需加载和提升应用性能。

5、插件系统

Webpack 提供了丰富的插件系统，可以通过插件实现各种功能的扩展，例如压缩代码、自动生成 HTML 文件等。

6、资源优化

Webpack 可以进行各种优化，如代码压缩、文件合并、按需加载等，以提高应用程序的性能和加载速度。

7、开发环境支持

Webpack 支持开发和生产环境的不同配置，可以通过不同的配置文件来满足不同环境下的需求，如开发环境下支持热更新，生产环境下需要压缩代码等。

8、热重载

在开发过程中实时更新修改的模块，无需刷新整个页面。

9、懒加载

按需加载模块，减少初始加载时间。

10、Tree Shaking

删除未使用的代码，减小打包后的文件体积。

主要概念

• vendor：指的是第三方依赖包 node_modules
• chunk：指的是构建过程中产生的临时文件，属于 bundle 的一部分
• bundle：指的是最终输出的构建文件
• runtimeChunk：指的是 webpack 用来组织模块之间依赖关系的辅助代码

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24