Question

我需要基于环境的reactjs组件中的一堆全局变量（例如：hostnames，token，api urls等）。但我不想单独将它添加到js中。我想创建project.config文件来设置prod：{hostname：example.com，api-url：prod，etc}和dev：{hostname：localhost.com，api-url：dev等}，我安装了loose-envify，但我必须为每个var指定。

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://example.com:3000',
    'webpack/hot/only-dev-server',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({'process.env.NODE_ENV': JSON.stringify('production')}),
    new ExtractTextPlugin("static/super.css", {
            allChunks: true
        })
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['react-hot', 'babel'],
      include: path.join(__dirname, 'src')
    },
    {  test: /\.scss$/,
        loaders: ["style", "css", "sass"],
        include: path.join(__dirname, 'src')
    }
    ]
  }
};

Answer 1

您是否尝试将一个配置json字符串化，该配置json可以为dev或prod提供一些常见和重写的属性？哪个将被赋予新的webpack.DefinePlugin（{...}）？

Answer 2

我试图尝试类似的东西并尝试以下似乎工作正常。

在您的webpack配置中添加 DefinePlugin 。以下是我的webconfig： -

 plugins: [
    new BundleTracker({filename: './webpack-stats.json'}),
    new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify(process.env.environment),
    }
  })
  ],

现在编译时使用以下命令： -

environment=local webpack (for local)
environment=development webpack(for dev)
environment=production webpack(for prod)

现在，如果您看到我已使用cli输入设置了'NODE_ENV'，那么当'NODE_ENV'作为值生成时，webpack会自动缩小您的输出包。

现在假设您在文件中声明了API url（我有Constants.jsx），所以我在constants.jsx中添加了以下内容。所以基本上你可以在这个Constants.jsx中读取webpack配置中设置的NODE_ENV，并通过从这里导出它来将它们导入到调用APIS的组件中。

const api_url=function(){
  let api_url='';
  if(process.env.NODE_ENV == 'local'){
    api_url= 'http://localhost:8002/api/v0';
  }
  else if(process.env.NODE_ENV == 'development'){
    api_url = 'https://development/api/v0';
  }
  else if(process.env.NODE_ENV == 'production'){
    api_url = 'https://production/api/v0';
  }
  return api_url;
}

export const url= api_url();

希望它有所帮助！

基于环境的变量配置文件 - reactjs，webpack

2 个答案: