[解決済み] webpackで環境依存の変数を渡す

質問

angularアプリをgulpからwebpackに変換しようとしています。gulpでは、NODE_ENVに応じてhtmlページ内のいくつかの変数（例えばデータベース名）を置き換えるためにgulp-preprocessを使用しています。webpackで同様の結果を得るための最良の方法は何ですか？

どのように解決するのですか？

基本的には2つの方法があります。

プラグインを定義する

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

これは単にマッチを "そのまま" に置き換えるだけであることに注意してください。そのため、文字列はそのような形式になっています。オブジェクトのようなもっと複雑な構造を持つこともできますが、その考え方は理解できるでしょう。

環境プラグイン

new webpack.EnvironmentPlugin(['NODE_ENV'])

EnvironmentPlugin 用途 DefinePlugin を内部に持ち、それを通して環境値をコードにマッピングしています。Terserの構文です。

エイリアス

別の方法として エイリアスモジュール . コンシューマ側からは、次のようになります。

var config = require('config');

コンフィギュレーションそのものは、次のようになります。

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

仮に process.env.NODE_ENV は development . これは、次のようにマッピングされます。 ./config/development.js とすると このモジュールがマッピングするモジュールは、このように設定をエクスポートすることができます。

module.exports = {
    testing: 'something',
    ...
};