Javascript Web包中的可互换配置文件

我正在尝试绑定一个react项目，该项目可以在多个环境中运行，并且需要在每个环境中运行不同的配置。我已经用browserify设置了它，但最近一直在寻找移动到webpack

这个想法是这样的：有一个

js

目录，里面有一堆js文件，其中

main.js

是入口点。还有一个

config

文件夹，其中包含

development.js

、

staging.js

、

production.js

等等。我正在使用

import config from./config'

从所有文件导入配置。因此，我希望能够创建一个包含所有代码的

main.bundle.js

文件，以及另一个

config.js

，其内容可以替换为

{environment}.js

这允许我们在部署时而不是构建时选择应用程序的配置，只需复制

{environment.js}

的内容即可

---

我尝试使用webpack的

CommonChunkPlugin

失败，但它在捆绑时抱怨

js/config.js

不存在（显然）。

为什么不进行多个构建，每个配置一个，然后部署您想要的一个呢？有不同的方法可以为构建加载所需的配置，但一种非常有效的方法是使用DefinePlugin为每个环境定义常量，针对这些常量编写一个条件以加载相应的配置，并让Uglify插件的死代码消除将条件缩减为一个有效的情况。我已经在很多地方使用过这种方法来处理每个环境的条件，而不会使生产代码膨胀。

为什么不进行多个构建，每个配置一个，然后部署您想要的一个呢？有不同的方法可以为构建加载所需的配置，但一种非常有效的方法是使用DefinePlugin为每个环境定义常量，针对这些常量编写一个条件以加载相应的配置，并让Uglify插件的死代码消除将条件缩减为一个有效的情况。我已经在许多地方使用了这种方法来处理每个环境的条件，而不会使生产代码膨胀