Webpack 网页包运行时条件模块解析

我有一个使用核心目录的应用程序，除了核心目录外，我还有不同的目录，其中包含扩展核心类的类，并稍微修改了逻辑

我有一个像下面这样的文件树

app
|-- core
|   |-- x
|   |-- y
|   |-- z
|   `-- plugins
|       |-- xyz-helper.js
|      
|-- slightly-modified-logic
|   `-- plugins
|       |-- xyz-helper.js

我想使用现有的网页功能来实现类似于“主题化”解决方案的功能。你有一个子主题，你可以覆盖父主题模板，如果你不覆盖一个特定的模板，它将使用父主题

因此，在我的情况下，理想的情况是：

1） 装载

稍微修改的逻辑

目录

2） 核心类中的依赖关系应该使用挂载目录来解决，如果挂载目录没有提供自己的实现，那么只能退回到核心类本身

我选中了

NormalModuleReplacementPlugin

，但这似乎只有在您想要影响整个构建时才有用，我希望捆绑包包含所有内容，即我根据需要加载的每个非核心目录的模块块

我想这样做的方式是构建一个

resolve

映射，假设我可以链接路径自定义别名，Webpack在返回到正常分辨率之前尝试所有这些。但是我如何在运行时做到这一点呢？应该根据运行时参数决定是否装载与核心不同的目录

---

我只需要一些提示，谢谢。

您可以使用网页动态导入。您可以在上查看文档 . 应该指定模块路径的一部分，例如，如果我们有一个

themes

目录，我们可以像这样加载相应的主题插件/代码：

import（`themes/${themeName}/config.js`）；
导入（`themes/${themeName}/plugins/plugin.js`）；

假设我们有一个文件结构：

themes
├─ themeA
│  └─ plugins
│     └─ plugin.js
└─ themeB
   └─ plugins
      └─ plugin.js

以及每个

plugin.js

文件的内容：

//themeA/plugins/plugin.js
export const thePlugin=（）=>console.log（'plugina'）；
//themeB/plugins/plugin.js
export const thePlugin=（）=>console.log（“插件B”）；

我们可以像这样使用动态导入：

let theme='themeA'；
导入（`./themes/${themes}/plugins/plugin.js`）。然后（{thePlugin}）=>{
plugin（）；
}); 
主题='themeB'；
导入（`./themes/${themes}/plugins/plugin.js`）。然后（{thePlugin}）=>{
plugin（）；
}); 

输出将是：

Plugin A
Plugin B

---

你可以读一篇很好的文章。

我认为这是不可能的。重载“导入”超出了打包文件的全部目的，因此我将生成不同的包，并根据需要通过自定义包管理器加载它们。不过，开始悬赏，希望听到不同的方法。你有没有看过使用加载主题？天哪，就是这样。我研究了动态导入，但错过了“神奇评论”部分。谢谢。请将其作为答案发布。对于任何可能正在寻找此答案的人。使用答案中的内容意味着，您仍然需要重构现有的导入，没有神奇的解决方案。然而，神奇的评论似乎真的很强大。我会尝试一下。是的，魔术评论非常强大，在这种情况下提供了很大的灵活性。您想在答案中添加有关魔术评论的评论吗？当然，您可以编辑答案并添加您可能需要的任何其他信息。