Webpack 5 新特性中的 Agency 能动性到底指什么？

Webpack 5 的官方文档中并没有一个直接命名为 Agency 的特性，但不少开发者将其与 Asset Modules 联系起来，可能是因为发音相近或者概念上的延伸。如果把 Agency 理解为“能动性”，那么 Webpack 5 确实在多个维度上提升了构建工具自主处理模块的能力。过去很多资源处理、缓存优化都需要开发者手动配置第三方 loader 或插件，而 Webpack 5 把这些能力内置化、自动化，让构建流程自己做出更合理的决策。这种“能动性”不仅减少了配置负担，还让模块之间的协作更加灵活。

资源模块：静态资源处理的自主化

在 Webpack 4 时代，处理图片、字体、图标等静态资源通常需要额外安装并配置 file-loader、url-loader 或 raw-loader。这些 loader 各自有独立的参数，配置繁琐且容易出现版本兼容问题。Webpack 5 引入了资源模块（Asset Modules），将文件处理逻辑直接集成到核心中，通过 type 字段即可指定资源类型，不再需要第三方 loader。

资源模块包含四种类型：asset/resource 对应 file-loader 的功能，会生成单独的文件并导出 URL；asset/inline 对应 url-loader 的功能，将资源转为 data URI 内联；asset/source 对应 raw-loader，导出资源的原始内容；asset 则允许通过条件自动在 resource 和 inline 之间切换，默认小于 8kb 的资源会被内联，否则生成单独文件。这种自动权衡正是“能动性”的体现：构建工具根据资源大小自主决定最优处理方式，开发者只需声明意图即可。

下面是一个典型的配置示例，展示了如何处理 PNG 图片和 SVG 图标：

module.exports = {
  module: {
    rules: [
      {
        test: /\.png$/,
        type: 'asset/resource'
      },
      {
        test: /\.svg$/,
        type: 'asset/inline'
      },
      {
        test: /\.txt$/,
        type: 'asset/source'
      },
      {
        test: /\.jpg$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024 // 10kb 以下内联
          }
        }
      }
    ]
  }
};

相比之前需要为每种文件指定 loader 和 options，现在只需一个 type 字段，配置可读性和维护性都大幅提升。对于大型项目，这种简化能有效减少依赖数量，降低构建环境的复杂度。同时，内置实现也意味着性能更好，因为 Webpack 不需要在 loader 链中传递文件内容，可以直接在核心层完成资源处理。

持久化缓存：构建过程的记忆与自主复现

Webpack 4 的缓存主要依赖 cache-loader 或 hard-source-webpack-plugin 等外部方案，但这些方案不够稳定，且需要额外配置。Webpack 5 原生支持文件系统级别的持久化缓存，通过 cache 配置即可开启。构建工具会把模块的编译结果、chunk 信息、解析结果等缓存到磁盘，下次构建时直接复用，大幅缩短二次构建时间。

持久化缓存的“能动性”体现在：Webpack 会根据文件内容的变化自动判断哪些模块需要重新编译，哪些可以直接复用缓存。这种判断不依赖开发者手动指定缓存策略，而是由工具内部通过内容哈希和依赖图自动完成。对于改动频繁但模块数量庞大的项目，二次构建速度往往能提升数倍甚至十几倍。

module.exports = {
  cache: {
    type: 'filesystem',
    cacheDirectory: __dirname + '/.webpack_cache',
    buildDependencies: {
      config: [__filename]
    }
  }
};

需要注意的是，持久化缓存也会占用一定的磁盘空间，并且首次构建时间可能略有增加，因为需要写入缓存。另外，如果构建环境是 CI 或临时容器，需要合理设置缓存目录，避免缓存失效或互相污染。但总体而言，对于开发环境的重启构建，这是性价比极高的优化手段。

持久化缓存不仅缓存模块编译结果，还会缓存 resolve 结果和 source map 信息，因此完整的增量构建体验比单纯的 loader 缓存更彻底。这种“记住过去、优化未来”的能力，让构建流程具备了类似人类学习记忆的特性，是 Webpack 5 能动性的又一重要表现。

模块联邦：微前端架构下的能动协作

模块联邦（Module Federation）是 Webpack 5 最受关注的新特性之一，它允许不同的 Webpack 构建之间在运行时动态共享模块，而不需要在构建时确定依赖关系。这种能力为微前端架构、多团队协作提供了极大灵活性。宿主应用可以加载远程应用暴露的组件，远程应用也可以独立部署和升级，彼此之间保持低耦合。

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        app1: 'app1@http://localhost:3001/remoteEntry.js'
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true }
      }
    })
  ]
};

在上述配置中，宿主应用声明了远程模块 app1 的地址，并且通过 shared 配置共享 React 依赖，避免重复加载。远程应用则需要通过 exposes 字段暴露自己的模块。运行时，Webpack 会根据配置动态加载远程入口文件，并解析其中的模块映射关系，实现跨应用代码复用。

模块联邦的“能动性”体现在构建工具不再是静态打包所有代码，而是像调度中心一样，在运行时根据实际需求决定加载哪些模块、从哪里加载、如何共享依赖。这种动态决策能力打破了传统微前端方案中需要 iframe 或自定义协议的限制，让前端应用之间的协作更加自然和高效。当然，模块联邦也带来了一些新的挑战，比如远程模块的版本管理、网络故障处理、样式隔离等，需要开发者在架构层面做好规划。

综合来看，Webpack 5 虽然没有一个叫作 Agency 的官方特性，但其在资源模块、持久化缓存和模块联邦等方面的改进，确实赋予了构建工具更强的自主性和灵活性。理解这些特性背后的设计理念，有助于开发者编写更简洁、更高效的构建配置，也能更好地应对复杂前端工程的演进需求。

Webpack 5Agency 能动性资源模块修改时间：2026-09-18 13:33:11