Webpack 5 作为前端构建领域的重要版本，在模块处理、缓存机制和资产分类上做了大量底层重构。过去我们在多应用体系中常遇到依赖重复打包、构建缓慢、资源类型配置繁琐等问题，而这一版通过几项核心能力提供了系统性的解决思路。理解这些新特性的运行方式，有助于在复杂项目中做出合理的架构选型。
模块联邦如何改变多应用协作模式
模块联邦（Module Federation）是 Webpack 5 最具突破性的特性之一。它允许一个运行时的 JavaScript 应用动态加载并运行另一个独立构建的应用所暴露的模块，且这些模块可以共享同一份依赖实例。在传统的微前端方案中，我们往往通过 iframe 或者运行时 import 远程脚本的方式拼装页面，但依赖无法真正复用，容易造成多份 React 或 Vue 同时存在于浏览器中。
通过 ModuleFederationPlugin，我们可以在宿主应用和远程应用之间建立契约。远程应用声明 exposes 字段把某些组件或工具函数暴露出去，宿主应用通过 remotes 字段在编译期建立引用关系。打包后，宿主并不会把远程代码打进自己的包里，而是在运行时按需拉取。这样多个团队可以独立发布，却像在使用本地模块一样自然。
以下示例展示了远程应用的基础配置：
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'remote_app',
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/components/Button.jsx'
},
shared: ['react', 'react-dom']
})
]
};
与之对应的宿主配置需要声明远程入口，并在业务代码中通过 import('remote_app/Button') 使用。这种机制显著降低了公共库的重复传输，也弱化了应用之间的强绑定。不过需要注意，shared 的版本协商策略若配置不当，可能引发运行时警告或双实例问题，因此建议明确版本区间并开启单例模式。
持久化缓存对构建性能的实质提升
Webpack 5 之前，缓存主要依赖第三方插件将模块记录在内存或硬盘中，且配置复杂、跨机器复用困难。新版本内置了基于文件系统的持久化缓存，通过 cache.type = 'filesystem' 即可开启。编译器会把模块的编译结果、依赖图谱及解析信息序列化到本地目录，下次启动直接读取，避免重新解析与转换。
这项能力的底层逻辑是内容寻址：每个模块根据其源码与依赖环境生成哈希，只有相关内容变化时才进入重新编译流程。对于包含上千个文件的企业级项目，冷启动时间可从数十秒降至几秒。同时缓存文件与 node_modules 隔离，可以通过 cache.buildDependencies 声明配置文件的依赖，保证配置变动时缓存失效。
开启方式十分简洁，参考如下配置片段：
module.exports = {
cache: {
type: 'filesystem',
buildDependencies: {
config: [__filename]
},
cacheDirectory: 'C:ASRwebpack_cache'
}
};
在实践中，我们把缓存目录放入高速磁盘并加入 CI 的缓存上传步骤，能让流水线构建同样享受本地开发的加速效果。需要提醒的是，若项目中使用了自定义 loader 且未正确处理输入输出，可能导致缓存命中异常，此时应检查 loader 是否具备确定性输出。
资源模块与树摇优化的使用方式
Webpack 5 用资产模块（Asset Modules）替代了 file-loader、url-loader 等常用加载器。开发者不再需要为图片、字体等配置额外依赖，而是通过 type: 'asset' 或 type: 'asset/resource' 直接描述资源行为。这减少了依赖树层级，也让构建配置更直观。
与此同时，新版本增强了 tree shaking 对嵌套导出的分析能力。配合 sideEffects 字段，打包器能更精准地剔除未引用代码。比如在工具库项目中，将无副作用的文件标记清楚，可以让最终产物体积下降明显。下面演示资源模块的简化写法：
module.exports = {
module: {
rules: [
{
test: /.(png|jpg)$/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 8 * 1024
}
}
}
]
}
};
当文件小于阈值时自动转 base64 内联，大于阈值则输出独立文件，这种行为以前需要组合多个 loader 才能实现。结合 optimization.usedExports 开启后，未使用的导出成员会在压缩阶段被移除。对于组件库或中台系统，这种原生支持既降低了维护成本，也避免了版本升级带来的 loader 兼容风险。
综合来看，Webpack 5 的改进并非单纯增加 API，而是从工程协作、性能瓶颈和配置冗余三个维度给出了务实方案。团队在迁移时可以先开启持久化缓存与资源模块，再逐步试点模块联邦，从而在可控范围内获得构建效率与交付灵活性的双重提升。