angular - 将 webpack production 指向不同的 API url

Question

我在我的 angular 4 项目中使用 webpack。它指向 api 的相同 url。现在，对于生产，我有不同的 API url，所以我应该把新 url 放在哪里？我正在使用 jhipster 项目。
来源: https://jhipster.github.io/using-angular/

webpack.prod.js :

const commonConfig = require('./webpack.common.js');
const webpackMerge = require('webpack-merge');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const Visualizer = require('webpack-visualizer-plugin');
const path = require('path');
const ENV = 'prod';

module.exports = webpackMerge(commonConfig({ env: ENV }), {
    devtool: 'source-map',
    output: {
        path: path.resolve('./build/www'),
        filename: '[hash].[name].bundle.js',
        chunkFilename: '[hash].[id].chunk.js'
    },
    plugins: [
        new ExtractTextPlugin('[hash].styles.css'),
        new Visualizer({
            // Webpack statistics in target folder
            filename: '../stats.html'
        })
    ]
});

Answer 1

我建议将您的环境相关变量视为实际环境变量，如3rd rule所述十二因素应用程序方法。

您不会因不断变化的环境内容而使您的代码过载，并且您将能够从应用程序外部轻松更新它们，甚至直接从您的部署系统进行更新。

在节点环境中，我个人更喜欢将这些变量存储到位于项目根目录中的专用 .env 文件中。

VAR_1=foo
VAR_2=bar

对于每个环境，您可能有不同的 .xxx.env 文件，或者在构建之前以编程方式切换文件。

为了使声明的环境变量可用于您的代码，我建议使用 webpack-dotenv-plugin .

您将能够从您的应用程序中获取环境变量，例如标准节点的用户环境变量:

const var1 = process.env.VAR_1;   // foo
const var2 = process.env.VAR_2;   // bar