title: How to add environment variables to package.json
body: <p>I'm using React Boilerplate and had a <code>.env</code> separately at the root to denote whether my server was development, staging or production. However, I realized that for my setup, that was not the best route. Then I learned that in package.json there is a block of code that actually shows environment variables for production, shown below:</p>
  
  <pre><code>"babel": {
      "env": {
          "production": {
              "only": [
                  "app"
              ],
              "plugins": [
                  "transform-react-remove-prop-types",
                  "transform-react-constant-elements",
                  "transform-react-inline-elements"
              ]
          },
          "test": {
              "plugins": [
                  "transform-es2015-modules-commonjs",
                  "dynamic-import-node"
              ]
          }
      }
  }
  </code></pre>
  
  <p>From here, I would like to add development and staging but I keep getting a webpack error that says </p>
  
  <pre><code>Unknown option: C:\folders\blah\project\package.json.development.VARIABLE.
  A common cause of this error is the presence of a configuration options 
  object without the corresponding preset name. Example:
  
  Invalid: { presets: [{option: value}] }
  Valid: { presets: [['presetName', {option: value}]] }
  </code></pre>
  
  <p>and my addition is like </p>
  
  <pre><code>"development": {
      "VARIABLE": "value"
  }
  </code></pre>
  
  <p>Any idea?</p>