Javascript 动态模块的Web包导入数组（在编译时已知）

在我的项目中，我想导入特定的模块，这些模块的实际路径只有在编译时才知道

假设我有组件/A.js、组件/B.js和组件/C.js，在我的App.js中，我想包含它们的一个子集，这些子集只有在网页包的编译时才会知道（例如，来自JSON）

我尝试过的-1

//App.js
compileData=等待getCompileDataSomehow（）
导入（“./components/”+compileData.component+“.js”）
。然后（/*使用组件*/）进行操作；

这项工作很好，但webpack将为每个

组件/*.js

文件创建一个块。此外，还将有额外的网络往返。我觉得这有点过分了，因为我知道当webpack运行时我需要什么组件。因此，我试图提供组件数组，因为

require（[…]）

也被认为是动态的

我的结局是什么

//App.js
import（“./components/ALL.js”）//此文件实际上不存在

//webpack.config.js
常量fs=require（'fs'）
const componentsToInclude=[“A”，“B”]//这将从json中读取
fs.writeFileSync（'./src/components/ALL.js'，
`
导出默认值[
${componentsToInclude.map（comp=>`require（“./${comp}.js”）`）}
].map（c=>c.default）；
`)
module.exports={//config//}

这管用！但正如您所看到的，这不是一个优雅的解决方案，而且bug很容易发生。那么，有人知道处理这种情况的正确方法吗