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

Question

我有一个使用Webpack打包的TypeScript的应用程序，它会加载一个json配置文件。由于项目还处于初期阶段，因此我们在生产环境中没有好的配置存储方式，所以我们将配置文件放在了一起：config.json和config.dev.json。

在我的TypeScript代码中，我想要能够输入以下内容：

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

如果在 Webpack 中传入 --mode development，我希望它要求使用 ./path/to/config.dev.json。这个能否仅通过 Webpack 或 Webpack + tsconfig.json 来实现呢？

- dx_over_dt

---

你给我的答案很好用。谢谢！ - dx_over_dt

如果您想将其链接到此问题的答案中，我会将其标记为答案。否则，我可以自己完成。 - dx_over_dt

（作为答案，而不是评论 ;)） - dx_over_dt

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 */

Reference:

• https://dev59.com/cF4b5IYBdhLWcg3w5VI9#43436223

- Peter