通过webpack为不同的环境加载url常量

我有webpack.config.js文件:

 'use strict'; var webpack = require('webpack') var env = process.env.NODE_ENV var API_URL_1 = { production: JSON.stringify('http://xyz:8000/api/v1/var'), development: JSON.stringify('http://192.168.99.102/api/v1/var') }; var API_URL_2 = { production: JSON.stringify('http://xyz:8000/api/v1/ui'), development: JSON.stringify('http://192.168.99.102/api/v1/ui"') }; var API_URL_3 = { production: JSON.stringify('http://xyz:8000/api/v1/data'), development: JSON.stringify('http://192.168.99.102/api/v1/data') }; var API_URL_4 = { production: JSON.stringify('http://xyz:8000/api/v1/calculated'), development: JSON.stringify('http://192.168.99.102/api/v1/calculated') }; var config = { module: { loaders: [ { test: /\.js$/, loaders: ['babel-loader'], exclude: /node_modules/ }, { test: /\.scss$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']} ] }, output: { library: 'Redux', libraryTarget: 'umd' }, plugins: [ new webpack.optimize.OccurrenceOrderPlugin(), new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(env), 'API_URL_1': API_URL_1[env], 'API_URL_2': API_URL_2[env], 'API_URL_3': API_URL_3[env], 'API_URL_4': API_URL_4[env] }) ] }; module.exports = config 

我想要dynamic地访问API_URL_1API_URL_2API_URL_3API_URL_4这取决于我在app.js运行的ReactDOM.render函数的环境,它看起来像这样:

 ReactDOM.render( <ParameterForm url_schema={ajax(API_URL_1)} url_uischema={ajax(API_URL_2)} url_data={ajax(API_URL_3)} url_submit={ajax(API_URL_4)}/>, document.getElementById('form') ); 

但是,当我运行我的app.js我不断得到这个错误即

无法编译。

在./src/containers/App.js中出错

/home/node/src/containers/App.js 120:30 error'ajax'is not defined no-undef 120:35 error'API_URL_1'is not defined no-undef 120:61 error'ajax'is not defined no- undef 120:66 error'API_URL_2'is not defined no-undef 120:88 error'ajax'is not defined no-undef 120:93 error'API_URL_3'is not defined no-undef 120:117 error'ajax'is not defined no-undef 120:122错误“API_URL_4”未定义no-undef

✖8个问题(8个错误,0个警告)

由于webpack.config.js是在我的app.js访问的文件,为什么这个错误popup? 有没有解决scheme来避免这个错误?

由于webpack.config.js是在我的app.js中访问的文件,为什么这个错误popup?

使用React组件的文件不应该直接访问webpack.config.js ,它会在编译时使用,当所有的string实体被replace为不variables时,所以需要一个额外的引用级别。
另外请记住,默认情况下,replace对于依赖的node_modules ,因为它们不经过预处理并从dist目录中取得。

关于ajax函数 – 检查你已经链接相应的库的聊天,它提供的function。 您可以通过extrernals函数类似的parsing器在运行时提供自定义导入。