我最终使用了类似于Matt Derrick'Answer的方法，但担心两点：
- 每次使用时都会注入完整的配置
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 import export语法，因为它在webpack下）：
const config = __APP_CONFIG__;
export default config;
在你的app.js，你现在可以使用import config from './config';获得的配置对象。