From 85f167dd0fa68081d35d86b3d569153ab9608326 Mon Sep 17 00:00:00 2001 From: Grisanu Naing Date: Fri, 25 Aug 2017 15:47:22 -0700 Subject: [PATCH 1/7] docs(guides): Add documentation about setting environment variables in CLI with --env --- src/content/guides/environment-variables.md | 55 +++++++++++++-------- 1 file changed, 34 insertions(+), 21 deletions(-) diff --git a/src/content/guides/environment-variables.md b/src/content/guides/environment-variables.md index 79870022c49f..52f57ed712c1 100644 --- a/src/content/guides/environment-variables.md +++ b/src/content/guides/environment-variables.md @@ -3,35 +3,48 @@ 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 would 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.prduction` sets `env.prduction` to `true` by default. There are also other various syntaxes that you can use. See the [webpack CLI](/api/cli/#environment-options) documentation for more information. -**package.json** +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 change `module.exports` to be a function: -```json -{ - "scripts": { - "build": "cross-env NODE_ENV=production PLATFORM=web webpack" - } -} +**webpack.config.js** + +```diff +- module.exports = { +- entry: './src/index.js', +- output: { +- filename: 'bundle.js', +- path: path.resolve(__dirname, 'dist') +- } +- } ++ module.exports = (env) => { ++ /** ++ * Use env. here: ++ * ++ * console.log(env.NODE_ENV) // 'local' ++ * console.log(env.production) // true ++ */ ++ ++ return { ++ entry: './src/index.js', ++ output: { ++ filename: 'bundle.js', ++ path: path.resolve(__dirname, 'dist') ++ } ++ } ++ } ``` From b2c5fdd86fe1953262f416b2d88dd495cffd4eaf Mon Sep 17 00:00:00 2001 From: Grisanu Naing Date: Fri, 25 Aug 2017 16:09:21 -0700 Subject: [PATCH 2/7] docs(api): Link webpack CLI Environment options section to guide --- src/content/api/cli.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/content/api/cli.md b/src/content/api/cli.md index d5e496cff412..a7059f99a850 100644 --- a/src/content/api/cli.md +++ b/src/content/api/cli.md @@ -139,6 +139,8 @@ The `--env` argument accepts various syntaxes: | webpack --env.prod --env.min | `{ prod: true, min: true }` | | webpack --env.prod --env min | `[{ prod: true }, "min"]` | +T> See this [environment variables](/guides/environment-variables) guide for more information. + ### Output Options This set of options allows you to manipulate certain [output](/configuration/output) parameters of your build. From 8b7ccc258281a7e5c8f30605bcfc7e59be205f3f Mon Sep 17 00:00:00 2001 From: Grisanu Naing Date: Mon, 28 Aug 2017 11:11:11 -0700 Subject: [PATCH 3/7] docs(api): Add additional usage to --env webpack CLI docs --- src/content/api/cli.md | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/content/api/cli.md b/src/content/api/cli.md index a7059f99a850..0914aab08c54 100644 --- a/src/content/api/cli.md +++ b/src/content/api/cli.md @@ -130,16 +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"]` | - -T> See this [environment variables](/guides/environment-variables) guide for more information. +| 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 this [environment variables](/guides/environment-variables) guide for more information on its usage. ### Output Options From 194087933e3683e721721a33734cb6fd3f5d2d0f Mon Sep 17 00:00:00 2001 From: Grisanu Naing Date: Wed, 30 Aug 2017 15:45:28 -0700 Subject: [PATCH 4/7] docs(api): Change `this` to `the` --- src/content/api/cli.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/api/cli.md b/src/content/api/cli.md index 0914aab08c54..1c2f1eca2731 100644 --- a/src/content/api/cli.md +++ b/src/content/api/cli.md @@ -140,7 +140,7 @@ The `--env` argument accepts various syntaxes: | webpack --env.prod --env min | `[{ prod: true }, "min"]` | | webpack --env.prod=foo --env.prod=bar | `{prod: [ "foo", "bar" ]}` | -T> See this [environment variables](/guides/environment-variables) guide for more information on its usage. +T> See the [environment variables](/guides/environment-variables) guide for more information on its usage. ### Output Options From 11b83f5656709c3a82250a2cb6a37b7d8c4663af Mon Sep 17 00:00:00 2001 From: Grisanu Naing Date: Wed, 30 Aug 2017 15:46:07 -0700 Subject: [PATCH 5/7] docs(guide): Fix typo and grammatical errors --- src/content/guides/environment-variables.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/guides/environment-variables.md b/src/content/guides/environment-variables.md index 52f57ed712c1..0e50c26ea291 100644 --- a/src/content/guides/environment-variables.md +++ b/src/content/guides/environment-variables.md @@ -11,13 +11,13 @@ related: To disambiguate in your `webpack.config.js` between [development](/guides/development) and [production builds](/guides/production), you may use environment variables. -The webpack command line [environment option](/api/cli/#environment-options), `--env` allows you to pass in as many environment variables as you would 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).) +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).) ```bash webpack --env.NODE_ENV=local --env.production --progress ``` -T> Setting up your `env` variable without assignment, `--env.prduction` sets `env.prduction` to `true` by default. There are also other various syntaxes that you can use. See the [webpack CLI](/api/cli/#environment-options) documentation for more information. +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 change `module.exports` to be a function: From 1da91a2a8558223eadede0a7c033334670972eb6 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Thu, 14 Sep 2017 23:00:11 -0400 Subject: [PATCH 6/7] docs(guides): fix formatting in environment-variables --- src/content/guides/environment-variables.md | 42 ++++++++------------- 1 file changed, 16 insertions(+), 26 deletions(-) diff --git a/src/content/guides/environment-variables.md b/src/content/guides/environment-variables.md index 0e50c26ea291..247bc396e7e9 100644 --- a/src/content/guides/environment-variables.md +++ b/src/content/guides/environment-variables.md @@ -19,32 +19,22 @@ webpack --env.NODE_ENV=local --env.production --progress 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 change `module.exports` to be a function: +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: -**webpack.config.js** +__webpack.config.js__ -```diff -- module.exports = { -- entry: './src/index.js', -- output: { -- filename: 'bundle.js', -- path: path.resolve(__dirname, 'dist') -- } -- } -+ module.exports = (env) => { -+ /** -+ * Use env. here: -+ * -+ * console.log(env.NODE_ENV) // 'local' -+ * console.log(env.production) // true -+ */ -+ -+ return { -+ entry: './src/index.js', -+ output: { -+ filename: 'bundle.js', -+ path: path.resolve(__dirname, 'dist') -+ } -+ } -+ } +``` js +module.exports = env => { + // Use env. 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') + } + } +} ``` From 37906eb57ff28dd3bf970578d0e74cc7483a16ed Mon Sep 17 00:00:00 2001 From: Grisanu Naing Date: Mon, 18 Sep 2017 12:47:26 -0700 Subject: [PATCH 7/7] docs(guide): Fix syntax error in code block --- src/content/guides/environment-variables.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/guides/environment-variables.md b/src/content/guides/environment-variables.md index 247bc396e7e9..33a789a49451 100644 --- a/src/content/guides/environment-variables.md +++ b/src/content/guides/environment-variables.md @@ -26,9 +26,9 @@ __webpack.config.js__ ``` js module.exports = env => { // Use env. here: - console.log('NODE_ENV, env.NODE_ENV) - console.log('Production: ', env.production) - + console.log('NODE_ENV: ', env.NODE_ENV) // 'local' + console.log('Production: ', env.production) // true + return { entry: './src/index.js', output: {