Webpack中的可互换配置文件

Question

我正在尝试捆绑一个可以在多个环境中运行的反应项目，并且需要在每个环境中运行不同的配置。我使用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 CommonsChunkPlugin失败，但它在捆绑时抱怨js/config.js不存在（显然）。

Answer 1

为什么不制作多个版本，每个配置一个，然后部署你想要的版本？有不同的方法可以为构建加载所需的配置，但一种方法是使用DefinePlugin为每个环境定义常量，为这些常量编写条件以加载相应的配置，并让Uglify插件的死代码消除削减有条件的一个有效案例。我已经在很多地方使用这种方法来处理每个环境条件而不会使生产代码膨胀。