反应+；Web包：在何处配置REST端点

我有一个React+Flux应用程序，正在使用网页包。我正在使用的RESTAPI由另一台服务器提供服务，我试图找出可以在何处指定后端端点常量，这取决于我是在开发环境还是产品环境中

目前，对于开发人员，我已经将URL编码为localhost:port，但在部署时，它仍然尝试访问localhost上的端点

---

看起来这应该是很常见的，但找不到任何信息。

您可以将环境变量添加到您的网页脚本中。node的一种常见做法是在bash或package.json中使用webpack脚本时使用ENV=production | | dev。接下来，您可以创建两个不同的配置文件，一个用于生产，另一个用于开发

plugins: [
    new webpack.DefinePlugin({
        ENV: process.ENV === 'dev' ? require('./dev-config-path')) : require('./prod-config-path')
    })
]

环境现在应该附着到窗口对象。确保不要添加API键或任何东西，因为它是可访问的。您还可以对api URL进行硬编码

plugins: [
    new webpack.DefinePlugin({
        API: process.ENV === 'dev' ? 'localhost:3000' : 'xxx.xxx.x.x'
    })
]

---

我发现在

webpack.config.js

上使用webpack的

externals

属性更容易。这就是你要做的：

在

webpack.config.js中

    ...
    externals: {
      config: JSON.stringify(production ? require('./config.prod.json') : require('./config.dev.json'))
    }
    ...

这样，您就可以为不同的环境创建单独的文件，其中列出了所需的所有配置变量。此外，您可以使用
webpack.config.dev.js
和
webpack.config.prod.js
并在此处指定相同的
externals
键并跳过三元检查

最后，您可以在代码中以commonjs模块的形式访问它们-
var config=require（'config'）
为什么在“插件”中？另一个答案是我们应该使用“外部”字段：。这两种方法是否等效？是否可能重复您可以打印堆栈跟踪？@ceebreenk您需要将
externals
定义为
module.exports
的直接子级。请确保情况如此。``module.exports={…externals:{}     } ```