Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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')
}
}
}
```