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

【问题标题】：Setting global variables in webpack for front-end config?在 webpack 中为前端配置设置全局变量？
【发布时间】：2023-03-11 15:32:01
【问题描述】：

我们的 api 有一个不同的 URL，具体取决于它是用于 react 应用程序的开发还是生产。

使用 webpack，我如何设置像 __API_URL__ 这样的环境变量，然后根据它是使用 webpack.config.dev 与 webpack.config.prod 构建的来更改它

我认为答案可能在webpack.DefinePlugin，但没有运气。

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

我希望__API_URL__ 可以作为一个全球性的，但没有这样的运气。

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

【问题讨论】：

【解决方案1】：

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

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

var config = require("config");

然后在您的webpack.config.js 中添加一个映射：

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

【讨论】：

【解决方案2】：

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

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

所以，它会找到__API_URL__的所有出现并改变它。

var apiUrl = __API_URL__

和

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

成为

var apiUrl = "localhost:3005"

【讨论】：