Webpack 运行时条件模块解析

Question

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

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

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

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

因此，就我而言，理想情况是：

1) 挂载slightly-modified-logic目录

2) 核心类中的依赖项应该使用挂载目录来解决，如果挂载目录不提供它自己的实现，那么只能回退到核心类本身。

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

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

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

Answer 1

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

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" 的好文章。

Webpack 运行时条件模块解析

Webpack runtime conditional module resolution

webpack

es6-module-loader

es6-modules