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插件的死代码消除削减有条件的一个有效的情况。我已经在很多地方使用这种方法来处理每个环境的条件而不会使生产代码膨胀。