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

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宏，根据构建执行。

Answer 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 没有设置，请使用{/ 1}用于linux / osx或export NODE_ENV=development用于Windows。

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

2 个答案: