私はマットデリックの回答に似たものを使用することになりましたが、2つの点が心配されました。
- 使用するたびに完全な構成が挿入されます
ENV（大規模な構成の、これは良くありません）。
require(env)異なるファイルを指すため、複数のエントリポイントを定義する必要があります。
私が思いついたのは、構成オブジェクトを作成して構成モジュールに挿入する単純なコンポーザーです。
これがIamが使用するファイル構造です。
config/
└── main.js
└── dev.js
└── production.js
src/
└── app.js
└── config.js
└── ...
webpack.config.js
の main.jsすべてのデフォルト設定のものを保持しています：
// main.js
const mainConfig = {
apiEndPoint: 'https://api.example.com',
...
}
module.exports = mainConfig;
の dev.jsそしてproduction.jsメイン設定をオーバーライドするだけホールド設定のもの：
// dev.js
const devConfig = {
apiEndPoint: 'http://localhost:4000'
}
module.exports = devConfig;
重要な部分は、webpack.config.js構成を構成し、DefinePluginを使用するを__APP_CONFIG__て、構成された構成オブジェクトを保持する環境変数を生成することです。
const argv = require('yargs').argv;
const _ = require('lodash');
const webpack = require('webpack');
// Import all app configs
const appConfig = require('./config/main');
const appConfigDev = require('./config/dev');
const appConfigProduction = require('./config/production');
const ENV = argv.env || 'dev';
function composeConfig(env) {
if (env === 'dev') {
return _.merge({}, appConfig, appConfigDev);
}
if (env === 'production') {
return _.merge({}, appConfig, appConfigProduction);
}
}
// Webpack config object
module.exports = {
entry: './src/app.js',
...
plugins: [
new webpack.DefinePlugin({
__APP_CONFIG__: JSON.stringify(composeConfig(ENV))
})
]
};
最後のステップは config.js次のようになります（ここではes6インポートエクスポート構文を使用しています。これは、webpackの下にあるためです）。
const config = __APP_CONFIG__;
export default config;
では、app.jsを使用import config from './config';して構成オブジェクトを取得できます。