如何配置Webpack Externals复用其他AMD模块的React与ReactDOM？

嘿，这个需求刚好可以通过Webpack的externals配置来实现，核心就是把你项目里对react和react-dom的依赖，直接映射到另一个团队打包好的AMD模块的导出属性上。

具体配置步骤 #

假设另一个团队的AMD模块注册的名称是OtherTeamsPackage（就是你示例里的那个导出对象的模块），你只需要在你的Webpack配置文件里添加如下externals配置：

module.exports = {
  // 你的其他Webpack配置（entry、output等）...
  externals: {
    // 当代码中require('react')时，实际解析为require('OtherTeamsPackage').React
    'react': 'amd OtherTeamsPackage.React',
    // 同理处理react-dom
    'react-dom': 'amd OtherTeamsPackage.ReactDOM'
  }
};

配置原理说明 #

• externals的键对应你项目中引入的依赖包名（比如react、react-dom）
• 值的格式为amd [模块ID].[属性名]：
  • amd告诉Webpack这是一个AMD模块
  • OtherTeamsPackage.React指定了具体的引用路径，Webpack会自动把你代码里的const React = require('react')转成const React = require('OtherTeamsPackage').React，完全匹配你的需求。

注意事项 #

• 确保另一个团队的AMD模块已经在你的应用加载前完成加载，并且它注册的模块ID确实是OtherTeamsPackage（如果他们的模块ID不同，记得替换成对应的名称）
• 不管你的项目用的是CommonJS的require还是ES模块的import语法，这个配置都能正常生效，Webpack会自动适配转换逻辑。

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