Webpack5多入口构建后引入报__webpack_modules__[t] is not a function如何解决

首先确认确实是Webpack 5的模块处理逻辑发生了变化，核心触发原因有两个：

• Webpack 4默认会对多入口的共享模块加载逻辑做隐式合并，而Webpack 5默认每个入口生成独立的runtime，多入口之间没有共享模块缓存，当你把react设为externals后，单个入口的runtime无法找到其他入口中声明的外部依赖引用，就会抛出__webpack_modules__[t] is not a function的错误
• Webpack 5对externals的匹配逻辑更严格，旧的externals配置无法覆盖嵌套路径下的依赖导入，你贴出的代码中仍然存在对组件库内部node_modules下react的引用，说明react没有被正确外置，仍然被当做内部模块处理

• 统一多入口的runtime配置，在webpack.config.js中添加如下配置，让所有入口共享同一套模块加载逻辑：

module.exports = {
  optimization: {
    // 单runtime共享所有入口的模块引用逻辑
    runtimeChunk: 'single'
  }
}

如果需要更精细的控制，也可以给每个入口单独指定相同的runtime名称：

module.exports = {
  entry: {
    components: { import: './src/components/index.js', runtime: 'lib-common' },
    animations: { import: './src/animations/index.js', runtime: 'lib-common' },
    datepicker: { import: './src/datepicker/index.js', runtime: 'lib-common' }
  }
}

• 修正externals配置，明确指定externals类型，确保所有层级的react相关导入都被正确外置：

module.exports = {
  // 根据你的库输出格式选择externalsType，commonjs适合普通npm包场景，umd适合兼容多种运行环境
  externalsType: 'commonjs2',
  externals: {
    react: 'react',
    'react-dom': 'react-dom'
    // 其他需要外置的公共依赖也可以加在这里
  }
}

配置完成后可以重新构建，检查产物中是否还存在对node_modules/react的内部引用，没有即说明外置生效。

• 补全明确的库输出配置，Webpack 5要求库类项目明确指定输出格式，避免隐式转换导致的导出异常：

module.exports = {
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js',
    library: {
      type: 'commonjs2'
    },
    clean: true
  }
}

• 如果以上配置修改后仍然报错，可以尝试关闭Webpack 5默认开启的模块合并优化：

module.exports = {
  optimization: {
    concatenateModules: false
  }
}

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