1

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

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')
    }
    ]
  }
};
4

2 回答 2

0

Did you try to stringify a config json that can have some common and overridden properties for dev or prod? Which will be given to the new webpack.DefinePlugin({...})?

于 2016-06-01T21:52:45.937 回答
0

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

在你的 webpack 配置中添加一个DefinePlugin。以下是我的网络配置： -

 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();

希望它有所帮助！

于 2016-07-04T16:48:14.743 回答