Skip to content
19 changes: 11 additions & 8 deletions src/content/api/cli.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
41 changes: 22 additions & 19 deletions src/content/guides/environment-variables.md
Original file line number Diff line number Diff line change
Expand Up @@ -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) // 'local'
console.log('Production: ', env.production) // true

return {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
}
```