Update environment variables guide to use webpack CLI option --env

src/content/api/cli.md

@@ -130,14 +130,17 @@ webpack --env.platform=web  # sets env.platform == "web"
 
 The `--env` argument accepts various syntaxes:
 
-| Invocation                    | Resulting environment       |
-|-------------------------------|-----------------------------|
-| webpack --env prod            | `"prod"`                    |
-| webpack --env.prod            | `{ prod: true }`            |
-| webpack --env.prod=1          | `{ prod: 1 }`               |
-| webpack --env.prod=foo        | `{ prod: "foo" }`           |
-| webpack --env.prod --env.min  | `{ prod: true, min: true }` |
-| webpack --env.prod --env min  | `[{ prod: true }, "min"]`   |
+| Invocation                             | Resulting environment       |
+|----------------------------------------|-----------------------------|
+| webpack --env prod                     | `"prod"`                    |
+| webpack --env.prod                     | `{ prod: true }`            |
+| webpack --env.prod=1                   | `{ prod: 1 }`               |
+| webpack --env.prod=foo                 | `{ prod: "foo" }`           |
+| webpack --env.prod --env.min           | `{ prod: true, min: true }` |
+| webpack --env.prod --env min           | `[{ prod: true }, "min"]`   |
+| webpack --env.prod=foo --env.prod=bar  | `{prod: [ "foo", "bar" ]}`  |
+
+T> See the [environment variables](/guides/environment-variables) guide for more information on its usage.
 
 ### Output Options
 

src/content/guides/environment-variables.md

@@ -3,35 +3,38 @@ title: Environment Variables
 sort: 16
 contributors:
   - simon04
+  - grisanu
 related:
-  - title: The Fine Art of the webpack 2 Config
-    url: https://blog.flennik.com/the-fine-art-of-the-webpack-2-config-dc4d19d7f172#.297u8iuz1
+  - title: The Fine Art of the webpack 3 Config
+    url: https://blog.flennik.com/the-fine-art-of-the-webpack-2-config-dc4d19d7f172#d60a
 ---
 
 To disambiguate in your `webpack.config.js` between [development](/guides/development) and [production builds](/guides/production), you may use environment variables.
 
-The standard approach in Node.js modules can be applied: Set an environment variable when running webpack and refer to the variables using Node's [`process.env`](https://nodejs.org/api/process.html#process_process_env). The variable `NODE_ENV` is commonly used as de-facto standard (see [here](https://dzone.com/articles/what-you-should-know-about-node-env)).
+The webpack command line [environment option](/api/cli/#environment-options), `--env` allows you to pass in as many environment variables as you like. Environment variables will be made accesible in your `webpack.config.js`. For example, `--env.production` or `--env.NODE_ENV=local` (`NODE_ENV` is conventionally used to define the environment type, see [here](https://dzone.com/articles/what-you-should-know-about-node-env).)
 
-**webpack.config.js**
-
-```diff
-module.exports = {
-  plugins: [
-    new webpack.optimize.UglifyJsPlugin({
-+      compress: process.env.NODE_ENV === 'production'
-    })
-  ]
-};
+```bash
+webpack --env.NODE_ENV=local --env.production --progress
 ```
 
-Use the [`cross-env`](https://www.npmjs.com/package/cross-env) package to cross-platform-set environment variables:
+T> Setting up your `env` variable without assignment, `--env.production` sets `--env.production` to `true` by default. There are also other syntaxes that you can use. See the [webpack CLI](/api/cli/#environment-options) documentation for more information.
+
+There is, however a change that you will have to make to your webpack config. Typically, in your webpack config `module.exports` points to the configuration object. To use the `env` variable, you must convert `module.exports` to a function:
 
-**package.json**
+__webpack.config.js__
 
-```json
-{
-  "scripts": {
-    "build": "cross-env NODE_ENV=production PLATFORM=web webpack"
+``` js
+module.exports = env => {
+  // Use env.<YOUR VARIABLE> here:
+  console.log('NODE_ENV, env.NODE_ENV)
+  console.log('Production: ', env.production)
+
+  return {
+    entry: './src/index.js',
+    output: {
+      filename: 'bundle.js',
+      path: path.resolve(__dirname, 'dist')
+    }
   }
 }
 ```