如何将特定于环境的详细信息从配置文件加载/写入 webpack 生成的 budle js 文件

Question

我有一个特定于环境的配置.js文件，如下所示：

module.exports = {
    local: {
        apiHost: 'http://localhost',
        apiPort: '3003',
    },
    development: {
        apiHost: 'http://192.168.1.49',
        apiPort: '3003',
    },
    testing: {
        apiHost: 'http://192.168.1.50',
        apiPort: '3003',
    }
}

为了使用这个文件，我写：-

const config = require('./config.js')[env];

这将配置的所有内容加载到我的 webpack (v-1( 生成的捆绑.js文件中.js。我只想将特定于环境的详细信息写入捆绑.js文件中，不想在捆绑.js文件中公开所有环境详细信息。

我该怎么做？

Answer 1

利用 Webpack 的 DefinePlugin： https://webpack.js.org/plugins/define-plugin/

在你的 webpack.config 中.js

const webpack = require('webpack');
const envConfig = require('/path/to/config.js');
plugins: [
  new webpack.DefinePlugin({
    ENV_CONFIG: envConfig[your_env] 
  });
]

在您的应用程序中

if(ENV_CONFIG) {
  console.log('Your environment details:', ENV_CONFIG);
}