ứng dụng kiễu góc với Webpack cho dev và sản xuất xây dựng

Question

Tôi có một ứng dụng kiễu góc với các tập tin đơn giản cấu hình sau config.js:

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

được nhập khẩu bởi Webpack nhập điểm app.js:

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

Tôi muốn có một khác nhau apiUrl khi tôi xây dựng sản xuất.

Cách dễ nhất để thực hiện điều đó trong Webpack là gì?

Answer 1

Có một câu hỏi tương tự trên https://stackoverflow.com/a/34032050/1610981

Nó liên quan bạn có thể sử dụng http://webpack.github.io/docs/list-of-plugins.html#defineplugin

File config.js sẽ là:

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

Và bên trong các tập tin cấu hình webpack:

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

Bạn nên có hai webpa ck configs, một cho develoment và một cho sản xuất. Mỗi một định nghĩa macro API_URL, theo thực hiện được xây dựng.

Answer 2

tôi khuyên bạn nên sử dụng biến môi trường với 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}) 
] 
... 

Nếu NODE_ENV không setuped sử dụng export NODE_ENV=development cho Linux/OSX hoặc SET NODE_ENV=development cho các cửa sổ.