随着前端项目的日益复杂，在开发中意味着应对不同资源，需要使用不同的特化处理逻辑，且不同类型文件之间无法信息互通。
1.webpack整体架构
Webpack 则忽略具体资源类型之间的差异，将所有代码/非代码文件都统一看作 Module —— 模块对象，以相同的加载、解析、依赖管理、优化、合并流程实现打包，并借助 Loader、Plugin 两种开放接口将资源差异处理逻辑转交由社区实现，实现统一资源构建模型，这种设计有很多优点
- 所有资源都是 Module，所以可以用同一套代码实现诸多特性，包括：代码压缩、Hot Module Replacement、缓存等；
- 打包时，资源与资源之间非常容易实现信息互换，例如可以轻易在 HTML 插入 Base64 格式的图片；
- 借助 Loader，Webpack 几乎可以用任意方式处理任意类型的资源，例如可以用 Less、Stylus、Sass 等预编译 CSS 代码。
2.具备哪些能力
- 基于 Module Federation 的微前端方案；
- 基于
webpack-dev-server的 Hot Module Replacement ；
- 基于 Terser、Tree-shaking、SplitChunks 等工具的 JavaScript 代码压缩、优化、混淆方案；
- 基于 lazyCompilation 的延迟编译功能；
- 有利于提升应用性能的异步模块加载能力；
- 有利于提升构建性能的持久化缓存能力；
- 内置 JavaScript、JSON、二进制资源解析、生成能力；