文章目录

1. webpack的定义2. webpack的背景3. webpack的核心思想3. webpack的作用4. webpack的优势5. webpack的劣势6. 对比其他打包工具7. webpack的浏览器兼容性8. webpack的运行环境9. webpack的打包过程9.1 初始化参数阶段9.1.1 配置参数9.1.2 实例化插件9.1.3 实例化编译对象9.1.4 加载插件9.1.5 entry-option9.1.6 after-resolvers阶段

9.2 模块编译阶段9.2.1 编译模块9.2.2 创建Chunk

9.3 输出资源阶段9.3.1 输出资源9.3.2 确定输出路径和文件名

10. webpack的运行流程10.1 运行流程和打包流程的比较

10. 合并参数10.1 配置文件（webpack.config.js）10.2 Shell语句（命令行参数）10.3 合并参数10.4 注意点10.5 底层源码

11. compiler对象12. Webpack生命周期13. entry-option14. tree-shaking15. 构建依赖图16. HMR17. 模式18. 资源优化19. 模块解析规则20. 插件系统21. 配置选项22. 总结

1. webpack的定义

Webpack是一个用于现代JavaScript应用程序的静态模块打包工具。

这里的“静态模块”指的是在开发阶段可以直接被Webpack引用的资源，这些资源可以直接被获取并打包进最终的输出文件（如bundle.js）。 静态模块可以包括JavaScript代码、CSS样式表、图片和其他类型的文件。

2. webpack的背景

Webpack的背景主要源于前端开发复杂度的提升和模块化规范的演变。

随着互联网的发展，前端项目变得越来越复杂，模块之间的关系难以梳理，耦合程度较高，导致代码难以维护。

Webpack应运而生，它可以打包所有依赖的资源，将它们打包成一个或多个js文件，有效降低文件请求次数，提升性能。

此外，Webpack的出现也与模块化规范的演变密切相关。

在早期制定前端模块化标准时，并没有直接选择CommonJS规范（CommonJS约定的是以同步的方式加载模块），而是专门为浏览器端重新设计了一个规范，叫做AMD（Asynchronous Module Definition）规范，即异步模块定义规范。

同期还推出了一个非常出名的库，叫做Require.js，它除了实现了AMD模块化规范，本身也是一个非常强大的模块加载器。

模块化规范：

前端开发在过去几年中经历了巨大的变革，项目的复杂度和规模不断增加。 随着代码量的增长，维护和理解代码变得更加困难，这促使了前端社区对模块化的强烈需求。 模块化可以帮助开发者将代码拆分成独立的、可重用的部分，每个部分都有自己的职责和接口，从而提高了代码的可维护性和可重用性。

模块化规范其中一些重要的规范：

文件划分方式：这是模块化最原始的方式，开发者简单地将代码拆分成多个文件，然后在需要时通过