Webpack 5.96+ 中 loader 导入资源模块的行为变更解析

背景概述

Webpack 5.96.0 版本引入了一个重要的行为变更，影响了 loader 中通过 this.importModule() 方法导入 asset/resource 类型资源模块时的返回值。这个变更修复了之前版本中存在的一个设计问题，但同时也影响了部分现有 loader 的工作方式。

问题现象

在 Webpack 5.96.0 之前，当 loader 使用 this.importModule() 导入一个 asset/resource 类型的资源模块时，会返回该资源的 URL 字符串。但从 5.96.0 版本开始，同样的操作会返回一个空对象。

变更原因

这个行为变更是 Webpack 团队有意为之的修复，主要基于以下技术考量：

1. 减少不必要的 JS 代码生成：Webpack 之前总是为所有资源生成 JS 文件，即使资源本身不是 JS 类型。这会导致额外的 JS 代码和 chunk 生成，增加了构建产物体积。

2. 更合理的资源处理逻辑：对于非 JS 资源（如图片、字体等），Webpack 现在会直接生成对应的二进制文件，而不再强制生成 JS 包装代码。

3. 性能优化：减少不必要的 JS 代码生成可以提升构建性能，特别是在处理大量非 JS 资源时。

解决方案

要解决这个问题，开发者需要明确告诉 Webpack 需要生成 JS 执行代码。可以通过以下方式实现：

1. 创建中间 JS loader：编写一个简单的 JS loader，明确要求 Webpack 生成 JS 代码并返回资源 URL。

2. 修改原有 loader：在原有 loader 中通过中间 JS loader 来导入资源。

示例解决方案代码：

// 主 loader
module.exports = function loader(source) {
  const data = JSON.parse(source);
  
  callbackify(async () => {
    data.asset = await this.importModule(`!!./js-loader.js!${resolve(this.context, data.asset)}`);
    return JSON.stringify(data);
  })(this.async());
};

// js-loader.js
module.exports = function loader() {
  return `module.exports = require(${JSON.stringify(this.utils.contextify(this.context, this.remainingRequest))});`;
};

实际应用场景

这种变更特别影响以下类型的 loader：

1. Web 应用清单(web app manifest) loader
2. 浏览器配置文件(browserconfig) loader
3. 其他需要引用资源文件的配置文件 loader

对于这些场景，开发者需要调整 loader 实现，通过中间 JS loader 来正确获取资源 URL。

迁移建议

1. 评估影响：检查项目中是否有 loader 依赖旧的 this.importModule() 行为。

2. 逐步迁移：对于受影响的 loader，按照上述方案进行修改。

3. 测试验证：确保修改后的 loader 在各种构建场景下都能正常工作。

4. 文档更新：如果维护的是开源 loader，记得更新文档说明兼容性要求。

技术深度解析

这个变更反映了 Webpack 向更合理的资源处理模型演进：

1. 资源类型识别：Webpack 现在能更准确地区分 JS 和非 JS 资源。

2. 构建优化：避免了为纯资源文件生成不必要的 JS 包装代码。

3. 模块系统一致性：使资源模块的行为更加符合预期，减少"魔法"行为。

虽然这个变更需要开发者进行一些适配工作，但从长远来看，它使 Webpack 的资源处理模型更加合理和高效，有利于项目的长期维护和性能优化。