如何从配置文件加载/写入环境特定的细节到webpack生成的budle js文件？

Question

我有一个环境的具体config.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 config.js的一切（ v-1）生成的bundle.js文件。我只想将特定于环境的细节写入bundle.js文件，不想公开bundle.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); 
}