Webpack 5升级后externals返回空对象问题求助

问题核心 #

将库包的Webpack从4升级到5后，构建的UMD包中通过require('uxp')引入的外部依赖返回空对象，但在控制台直接执行require('uxp')能拿到预期的全局对象；降级回Webpack4后问题消失，且该UMD包被导入到Webpack4项目中时，Webpack的require方法执行返回空，推测是Webpack4与5的require处理逻辑冲突导致。

关键配置与代码 #

业务代码片段 #

import React from 'react';

const uxp = require('uxp');

export const ExportAsSection = () => {
  console.log("UXP TEST:")
  // 空对象，但控制台直接执行能拿到全局对象
  console.log(uxp)

  return (
      <div>I am a panel</div>
  );
};

核心配置（externals部分） #

externals: {
  lodash: 'lodash',
  'react-dom': 'react-dom',
  react: 'react',
  uxp: 'commonjs2 uxp' // 问题可能出在这里
},

解决方案 #

1. 调整externals的依赖类型为umd #

Webpack5对UMD模块的外部依赖解析逻辑更严格，将uxp的外部依赖类型从commonjs2改为umd，能让生成的UMD包兼容Webpack4的消费环境：

externals: {
  lodash: 'lodash',
  'react-dom': 'react-dom',
  react: 'react',
  uxp: 'umd uxp' // 修改此处
}

2. 直接映射全局变量 #

如果uxp是挂载在全局环境（如window.uxp或global.uxp）的变量，可直接在externals中指定全局路径，跳过Webpack的require解析逻辑：

externals: {
  lodash: 'lodash',
  'react-dom': 'react-dom',
  react: 'react',
  uxp: 'window.uxp' // 根据实际全局挂载位置调整
}

3. 全局设置externalsType为umd #

在基础Webpack配置中添加externalsType字段，统一所有外部依赖的输出类型，确保UMD包的兼容性：

// 基础webpack.config.js
module.exports = {
  // ...其他配置
  externalsType: 'umd',
  // ...
}

验证方式 #

修改配置后重新构建UMD包，将其导入到Webpack4项目中，执行代码检查console.log(uxp)是否能正常输出全局对象。

内容的提问来源于stack exchange，提问作者Dave Stein