Konfiguracja URL-a kątowego API aplikacji za pomocą pakietu Webpack dla wersji deweloperskich i deweloperskich - javascript, angularjs, webpack

Mam aplikację Angular z następującym prostym plikiem konfiguracyjnym config.js:

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

który jest importowany przez punkt wejścia Webpack app.js:

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

Chciałbym mieć inny apiUrl kiedy robię kompilację produkcyjną.

Jaki jest najłatwiejszy sposób na zrobienie tego w pakiecie Webpack?

Odpowiedzi:

Jest podobne pytanie https://stackoverflow.com/a/34032050/1610981

Odnosi się do ciebie możesz użyć http://webpack.github.io/docs/list-of-plugins.html#defineplugin

Plik config.js wygląda następująco:

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

Wewnątrz plików konfiguracyjnych pakietu webpack:

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

Powinieneś mieć dwie konfiguracje webpack, jedną dla develoment i drugą dla produkcji. Każdy definiuje makro API_URL, zgodnie z wykonaną budową.

Polecam używać zmiennej środowiskowej za pomocą 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})
]
...

Gdyby NODE_ENV nie skonfigurowano użycia export NODE_ENV=development dla linux / osx lub SET NODE_ENV=development dla Windowsa.