Angular アプリの Webpack で環境に依存する変数を渡す方法は?

Webpack で環境に依存する変数を渡す

Gulp から Webpack に変換された Angular アプリで、Webpack を使用して Gulp-Preprocess の機能を複製します。 NODE_ENV に基づいて変数 (データベース名など) を動的に置き換えるには、別のものが必要です。

これを実現するには、いくつかのオプションがあります。

DefinePlugin

webpack.DefinePlugin を使用して、環境変数を JSON 文字列として直接code.

new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
})

この手法では、一致する文字列が「として置き換えられる」ことに注意してください。です」には、特定の JSON 形式が必要です。オブジェクトのような複雑な構造も可能ですが、原則は同じです。

EnvironmentPlugin

内部で DefinePlugin を利用する webpack.EnvironmentPlugin を利用します。環境値をコードにマッピングし、構文を簡素化します。

new webpack.EnvironmentPlugin(['NODE_ENV'])

Alias

別名モジュールを介して構成を使用します:

// Consumer side
var config = require('config');

// Configuration itself
resolve: {
    alias: {
        config: path.join(__dirname, 'config', process.env.NODE_ENV)
    }
}

Based NODE_ENV では、この例は次のようなモジュールにマップされます。 ./config/development.js、必要な構成をエクスポートします。

以上がAngular アプリの Webpack で環境に依存する変数を渡す方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。