javascript - 需要一组基于 DefinePlugin 常量的模块

Question

我正在尝试使用 Webpack 构建一个 Web 应用程序，但我在设计的特定部分遇到了一些困难 - 希望这里的人有做类似事情的经验(或者足够了解来告诉我我做的完全错了)!

基本上，我们有一个 Angular 仪表板应用程序，它由一个“外壳”(通用 UI、 session 管理服务等)和一组模块(可以插入外壳的应用程序的独立部分)组成.棘手的一点是，这个应用程序将分发给多个客户，每个客户都需要一组不同的模块，并且需要稍微不同的配置选项。

到目前为止，我使用 DefinePlugin 在构建时将 JSON 配置文件作为常量加载，在此方面取得了一些进展:

const envConfig = require(`./config/${yargs.argv.env || "dev"}`);

...

new webpack.DefinePlugin({        
    __ENV__: Object.keys(envConfig).reduce((obj, key) => {
        obj[key] = JSON.stringify(envConfig[key]);
        return obj;
    }, {})
})

然后我尝试使用动态要求来仅包含指定的模块，如下所示:

__ENV__.modules.map((id) => require(`./modules/${id}/index.ts`).default)

这 种 工作 - 正确的模块被加载，但 Webpack 没有意识到 __ENV__ 在运行时永远不会改变的事实，所以构建文件本身包含所有模块，包括禁用的模块。显然，对于只需要单个模块的客户来说，这会不必要地增加文件大小，所以我对此并不满意。

因此，将其简化为一个简单的问题 - 是否有一种简单的方法可以根据 DefinePlugin 常量加载一组特定的模块(或者是否有替代方法来实现我想要达到的目标)？我觉得我肯定遗漏了一些明显的东西。

Answer 1

你可以设置一个 resolve.alias并为每个客户配置。这将为您提供所需的设置。