Question

我的api有不同的URL，具体取决于它是否为反应应用程序的开发或生产。

使用webpack，如何设置类似__API_URL__的env var，然后根据使用 webpack.config.dev vs webpack.config.prod

构建来更改
我认为答案可能在webpack.DefinePlugin，但没有运气。

new webpack.DefinePlugin({ __API_URL__: 'localhost:3005', }),

我希望__API_URL__可以作为全球使用，但没有运气。

这样做的正确方法是什么？关键还在于prod部署上没有快速服务器。所以这必须在构建期间发生...

Answer 1

DefinePlugin无法按预期工作。它不会将__API_URL__公开为全局变量。

根据documentation：“值将被内联到代码中，允许缩小传递以删除冗余条件。”

因此，它会找到__API_URL__的所有出现并更改它。

var apiUrl = __API_URL__

和

__API_URL__: '"localhost:3005"' // note the ' and "

成为

var apiUrl = "localhost:3005"

Answer 2

正如Michael Rasoahaingo所说，DefinePlugin的作用类似于用正则表达式替换值：它在源代码中逐字替换值。我不建议将DefinePlugin用于此类任务。

如果您想根据环境切换配置，可以使用resolve.alias。只需导入您的配置：

var config = require("config");

然后在webpack.config.js中添加映射：

resolve: {
    alias: {
       config$: require.resolve("path/to/real/config/file")
    }
}

在webpack中为前端配置设置全局变量？

2 个答案: