如何從配置文件加載/寫入環境特定的細節到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); 
}