Question

我正在尝试使用Webpack构建一个Web应用程序，并且我在设计的某个特定部分遇到了一些问题 - 希望这里的某个人有经验做类似的事情（或者知道足以告诉我我这样做完全错了）！

基本上，我们有一个Angular仪表板应用程序，它包含一个'shell'（常见的UI，会话管理服务等）和一组模块（可以插入shell的应用程序的自包含部分）。棘手的是，这个应用程序将分发给多个客户，每个客户都需要一组不同的模块，并且需要稍微不同的配置选项。

到目前为止，我已经取得了一些进展，使用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并按客户配置。这会给你你想要的那种设置。

Answer 2

在考虑bebraw的建议之后，我想出了一个体面的（？）解决方案 - 如果有人遇到同样的问题我认为我会将其作为额外答案发布或者想要实现类似的东西。我使用的是TypeScript，但无论是否使用ES6，相同的方法都可以在JavaScript中正常工作。

基本上，我现在在config中有一个名为src的目录，其中包含每个客户的子目录，如下所示：

config
├── dev
├── cust1
└── cust2

其中每个文件都包含一个info.ts文件，用于导出REST端点URL等常量：

export default {
    name: "Company Name",
    server: "http://localhost:8810",
    service: "ServiceName"
}

一个modules.ts文件，它导出模块数组以传递到我应用程序的bootstrapper函数中：

import util from "../../modules/util";
import session from "../../modules/session";
import shell from "../../modules/shell";
import stock from "../../modules/stock";

export default [
    util,
    session,
    shell,
    stock,
];

这些必须是分开的 - 我的初始实现为每个配置都有一个.ts文件，但这意味着每当我尝试从模块中导入常量时，我最终都会得到循环依赖。

然后我根据命令行参数添加了resolve.alias：

alias: {
    "config": path.join(__dirname, `src/config/${yargs.argv.env || "dev"}/`)
}

现在，我可以通过调用来切换config/info和config/modules所指的内容：

webpack --env dev
webpack --env cust1
webpack --env cust2

我仍然需要看看它在实践中是如何运作的，并且可能会改进不同出口的界面，但作为一个起点我到目前为止还喜欢它！

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

2 个答案: