使用 Webpack 根据模式要求不同的应用配置文件

Question

我有一个Webpack TypeScript应用程序，可以加载一个json配置文件。 该项目还处于起步阶段，所以我们在生产中还没有一个好的配置存储，所以我们并排存储我们的配置文件：config.json和config.dev.json。

在我的 TypeScript 中，我希望能够键入

import Config from './path/to/config.json';

如果--mode development传递到 webpack 中，我希望它需要./path/to/config.dev.json.

这是否可能仅使用 Webpack 或 Webpack + tsconfig.json？

Answer 1

下面答案的想法是使用 webpack-define-plugin

webpack.config.js

const argv = require('yargs').argv;
const webpack = require('webpack');
// Import all app configs
const appConfig = require('./path/to/config.json'); /* Base config */
const appConfigDev = require('./path/to/config.dev.json'); /* Development */
const appConfigProd = require('./path/to/config.prod.json'); /* Production */
const ENV = argv.env || 'dev';
function composeConfig(env) { /* Helper function to dynamically set runtime config */
if (env === 'dev') {
return { ...appConfig, ...appConfigDev };
}
if (env === 'production') {
return { ...appConfig, ...appConfigProd };
}
}
// Webpack config object
module.exports = {
entry: './src/app.js',
...
plugins: [
new webpack.DefinePlugin({
__APP_CONFIG__: JSON.stringify(composeConfig(ENV))
})
]
};

应用程序中的使用情况

const config = __APP_CONFIG__
/* config available in module scope */

参考：

• https://stackoverflow.com/a/43436223/6129793