使用Webpack进行开发和生产构建的Angular应用程序API URL配置

Question

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

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

由Webpack入口点导入app.js:

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

apiUrl当我进行生产构建时,我想要有所不同.

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

Answer 1

/sf/answers/2382243531/上有一个类似的问题

它涉及您可以使用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 宏，根据构建执行。