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

Question

我有一个Webpacked 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