Webpack 运行时条件模块解析

Question

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

我得到了一个如下所示的文件树。

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

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

所以，就我而言，理想的情况是：

1) 挂载slightly-modified-logic目录

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

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

我正在考虑这样做的方式是构建一个resolve 映射，假设我可以链接路径自定义别名，并且 Webpack 在回到正常分辨率之前会尝试所有这些。但是我该怎么做@运行时？应根据运行时参数决定挂载与核心不同的目录。

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

Answer 1

您可以使用 Webpack 动态导入。您可以查看"Weback - Dynamic expressions in import()" 上的文档 .需要指定部分模块路径，例如如果我们有一个themes 目录，我们可以像这样加载相应的主题插件/代码：

import(`themes/${themeName}/config.js`);
import(`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('Plugin A');

// themeB/plugins/plugin.js
export const thePlugin = () => console.log('Plugin B');

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

let theme = 'themeA';

import(`./themes/${theme}/plugins/plugin.js`).then(({ thePlugin }) => {
  thePlugin();
}); 

theme = 'themeB';

import(`./themes/${theme}/plugins/plugin.js`).then(({ thePlugin }) => {
  thePlugin();
}); 

输出将是：

Plugin A
Plugin B

你可以阅读一篇关于"Webpack and dynamic import"的好文章。