Angular 应用程序 API URL 配置与 Webpack 用于开发和生产构建答案

【问题标题】：Angular application API URL configuration with Webpack for dev and production buildsAngular 应用程序 API URL 配置与 Webpack 用于开发和生产构建
【发布时间】：2016-04-14 01:17:38
【问题描述】：

我有一个带有以下简单配置文件config.js 的 Angular 应用程序：

export default function(app) {
  app.constant('config', {apiUrl: 'https://localhost:8080'});
};

由Webpack入口点app.js导入：

import config from './config';
config(app);

当我进行生产构建时，我希望有一个不同的apiUrl。

在 Webpack 中最简单的方法是什么？

【问题讨论】：

我没有确切的答案，因为我不使用 webpack。目前我一直在使用 ASP.NET 捆绑，但我们实现相同事情的方式（对于我们的 API 端点）是捆绑一个定义相同常量（不同值）的不同文件，具体取决于我们的目标环境，例如生产-> prod/config.js； uat -> uat/config.js.
是的，这是其中一种选择，在我决定在location.hostname 上拥有一个带有switch 的文件之前
在 Github 上查看我的解决方案，我不敢相信要找到一个简单的解决方案来将配置从 webpack cmd 传递到 Angular2 Typescript，我的解决方案非常简单，github.com/Sweetog/yet-another-angular2-boilerplate

标签： javascript angularjs webpack

【解决方案1】：

https://stackoverflow.com/a/34032050/1610981上有一个类似的问题

你可以使用http://webpack.github.io/docs/list-of-plugins.html#defineplugin

config.js 文件是这样的：

export default function(app) {
  app.constant('config', {apiUrl: API_URL});
};

在 webpack 配置文件中：

plugins:[
  new webpack.DefinePlugin({
    API_URL: JSON.stringify('https://localhost:8080')
  })
]

你应该有两个 webpack 配置，一个用于开发，另一个用于生产。每一个都定义了 API_URL 宏，根据构建执行。

【讨论】：

我也有几个用于暂存的生产版本。如何使用建议的方法解决它？

【解决方案2】：

我建议使用带有webpack.DefinePlugin的环境变量

//webpack.config.js
...

let API_URL;
if (process.env.NODE_ENV == 'development') {
  API_URL = 'https://dev:8080';
} else {
  API_URL = 'https://prod:8080';
}

// or

const API_URL = process.env.API_URL;

...

plugins:[
  new webpack.DefinePlugin({API_URL: API_URL})
]
...

如果 NODE_ENV 未设置，请使用 export NODE_ENV=development 用于 linux/osx 或 SET NODE_ENV=development 用于 Windows。

【讨论】：