javascript - Webpack 中可互换的配置文件

Question

我正在尝试捆绑一个可以在多个环境中运行的 react 项目，并且需要不同的配置才能在每个环境中运行。我已经使用 browserify 设置了它，但最近一直在考虑转向 webpack。

想法是这样的:有一个 js 目录，里面有一堆 js 文件，其中 main.js 是入口点。还有一个 config 文件夹，其中包含 development.js、staging.js、development.js 等。我使用 import config from './config' 从所有文件导入配置。因此，我希望能够使用我们所有的代码创建一个 main.bundle.js 文件，以及另一个 config.js ，其内容可以替换为 {环境}.js.

这使我们能够在部署时选择应用的配置，而不是在构建时，只需复制 {environment.js} 的内容即可。

我尝试使用 webpack 的 CommonsChunkPlugin 失败，但它在捆绑时提示 js/config.js 不存在(显然)。

Answer 1

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