时间戳

首页 > 解决方案 > Webpack 运行时条件模块解析

webpack - Webpack 运行时条件模块解析

问题描述

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

我有一个如下所示的文件树。

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 在回到正常分辨率之前会尝试所有这些。但是我该怎么做@运行时？应根据运行时参数决定挂载与核心不同的目录。

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

标签： webpackes6-moduleses6-module-loader

解决方案

您可以使用 Webpack 动态导入。您可以查看有关“Weback - 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 和动态导入”的好文章。

推荐阅读