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

grisanu · 2017-08-25T23:26:00Z

Update environment variables guide to use webpack CLI option --env instead of recommending cross-env
Link section in webpack CLI Environment Options section to guide

TheLarkInn · 2017-08-27T18:03:47Z

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.


I know it's not a relevant change that you have made, but I noticed we were missing one more --env usage format!

For example if you wanted to pass an "array" of info to the same property you can do so like this:

--env.foo=hello --env.foo=world

And inside of the config would return the following for env

{foo: ['hello', 'world']}

Would you be willing to add this information in this PR?

ChrisChinchilla · 2017-08-30T15:58:55Z

src/content/api/cli.md

+| 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.


@grisanu Better to use 'See the' as there is only one environment guide.

ChrisChinchilla · 2017-08-30T16:00:23Z

src/content/guides/environment-variables.md

 ---

 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).)


@grisanu You can probably remove 'would' from 'as you would like', it serves no purpose here.

ChrisChinchilla · 2017-08-30T16:02:16Z

src/content/guides/environment-variables.md

 ```

-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.


@grisanu I would probably say 'the assignment' unless I'm missing something, and also do you mean --env.production?

You don't really need the 'various' really.

ChrisChinchilla

Hi @grisanu I'm helping out with Webpack offering some language advice on changes to documentation, and I'm just going to add a couple of small suggestions to this PR.

Thanks for your submission :)

TheLarkInn · 2017-08-30T21:00:36Z

@ChrisChinchilla thank you for jumping in and helping with these kind of contributions. @grisanu if anything is unclear don't hesitate to chime in. Happy to advise and assist as well.

grisanu · 2017-08-30T22:50:08Z

Thank you for all of your suggestions! I've made changes and pushed. Please let me know what you think! @TheDutchCoder @ChrisChinchilla

TheDutchCoder · 2017-08-31T19:42:26Z

^^ @TheLarkInn I think ;)

…n CLI with --env

…lude-webpack-cli-option-env

skipjack

@grisanu thanks for your work on this! As soon as the build passes I'll get this merged. There seemed to be something a bit off with the formatting, you may want to double check to make sure your editor listens to our .editorconfig file.

…lude-webpack-cli-option-env

grisanu · 2017-09-18T19:48:59Z

@skipjack Thank you! 👍

* docs(api): minor fix in cli Make minor fix in the CLI documentation to reflect this comment: webpack#1577 (comment) * docs(plugins): clarify and simplify `SourceMapDevToolPlugin` docs (#1581) Try to resolve the confusion from #1556. Also update the options section to clean things up a bit both for readability and grammar. Resolves #1556 * docs(guides): update "external limitations" example in author-libraries (#1583) * docs(plugins): update commons-chunk-plugin.md (#1560) Changed example to declare the plugin within `plugins` property. * docs(guides): rewrite shimming (#1579) Rewrite the main sections of the guide to synchronize it with the other core guides. Briefly mention the other utilities that don't require full on examples (details can be found via links). Closes #1258 * docs(guides): fix small issues in shimming (#1591) * docs(guides): fix entry path in typescript (#1592) * docs(guides): fix typos in production (#1584) * fix(sponsors): update to reflect opencollective change (#1588) OpenCollective's structure changed a bit. This address that and makes a few other notable changes: - add additional sponsors - allow to merge additional sponsors to existing sponsors - limit width of logos to 3 x height to disallow very wide logos - format money values with commas * docs(config): update configuration-languages (#1590) Remove local type def from TypeScript snippet. The @types/node type definition module already declares `__dirname` type: https://git.io/v5Dr9 * docs(guides): update hot-module-replacement (#1539) Add an example to demonstrate using hot module replacement with `webpack-dev-server`'s Node.js API instead of within a normal configuration file. * docs(guides): update development.md (#1586) The article was missing references to `clean-webpack-plugin` in the `webpack.config.js` file and `package.json` files. * docs(guides): update tree-shaking.md (#1589) As a conclusion, I thought it would be a good idea to show case a high-level explanation of why it's called tree shaking. Once the user reads the guide and ends up with a high-level explanation the word tree shaking will stick to the user's head. * docs(guides): update code-splitting (#1585) Suggest solutions to the problem right away seems to be a better approach. Use similar text as was used here: https://webpack.js.org/api/module-methods/#import- * docs(plugins): update module-concatenation-plugin (#1565) Add more information about optimization bailouts. Attempt to transfer content from the blog post to the official docs. I want to follow up with a PR for better bailout reasons. The hope is that the reasons will match those listed in the table. * docs(api): fix type in compiler.md (#1601) * docs(config): update output.md (#1541) Clarify interactions between `libraryTarget` and `library`. The interactions between the two and how some of the sections were not well explained, in some cases were incorrect, misleading or missing information. * docs(api): add concurrent usage warning in node.md (#1599) * docs(guides): update environment-variables (#1549) Add documentation about setting environment variables in CLI with `--env`. Link to webpack _CLI Environment_ section. Add additional usage to `--env` CLI docs. * Swap ordering of pre/post loaders (#1602) `pre` loaders run at the beginning, `post` loaders run at the end. * docs(sponsors): update segment's donations (#1603) * update contributors

* update /content/loaders & /content/plugins * docs(api): minor fix in cli Make minor fix in the CLI documentation to reflect this comment: webpack#1577 (comment) * docs(plugins): clarify and simplify `SourceMapDevToolPlugin` docs (#1581) Try to resolve the confusion from #1556. Also update the options section to clean things up a bit both for readability and grammar. Resolves #1556 * docs(guides): update "external limitations" example in author-libraries (#1583) * docs(plugins): update commons-chunk-plugin.md (#1560) Changed example to declare the plugin within `plugins` property. * docs(guides): rewrite shimming (#1579) Rewrite the main sections of the guide to synchronize it with the other core guides. Briefly mention the other utilities that don't require full on examples (details can be found via links). Closes #1258 * docs(guides): fix small issues in shimming (#1591) * docs(guides): fix entry path in typescript (#1592) * docs(guides): fix typos in production (#1584) * fix(sponsors): update to reflect opencollective change (#1588) OpenCollective's structure changed a bit. This address that and makes a few other notable changes: - add additional sponsors - allow to merge additional sponsors to existing sponsors - limit width of logos to 3 x height to disallow very wide logos - format money values with commas * docs(config): update configuration-languages (#1590) Remove local type def from TypeScript snippet. The @types/node type definition module already declares `__dirname` type: https://git.io/v5Dr9 * docs(guides): update hot-module-replacement (#1539) Add an example to demonstrate using hot module replacement with `webpack-dev-server`'s Node.js API instead of within a normal configuration file. * docs(guides): update development.md (#1586) The article was missing references to `clean-webpack-plugin` in the `webpack.config.js` file and `package.json` files. * docs(guides): update tree-shaking.md (#1589) As a conclusion, I thought it would be a good idea to show case a high-level explanation of why it's called tree shaking. Once the user reads the guide and ends up with a high-level explanation the word tree shaking will stick to the user's head. * docs(guides): update code-splitting (#1585) Suggest solutions to the problem right away seems to be a better approach. Use similar text as was used here: https://webpack.js.org/api/module-methods/#import- * docs(plugins): update module-concatenation-plugin (#1565) Add more information about optimization bailouts. Attempt to transfer content from the blog post to the official docs. I want to follow up with a PR for better bailout reasons. The hope is that the reasons will match those listed in the table. * docs(api): fix type in compiler.md (#1601) * docs(config): update output.md (#1541) Clarify interactions between `libraryTarget` and `library`. The interactions between the two and how some of the sections were not well explained, in some cases were incorrect, misleading or missing information. * docs(api): add concurrent usage warning in node.md (#1599) * docs(guides): update environment-variables (#1549) Add documentation about setting environment variables in CLI with `--env`. Link to webpack _CLI Environment_ section. Add additional usage to `--env` CLI docs. * update /content/loaders & /content/plugins * Swap ordering of pre/post loaders (#1602) `pre` loaders run at the beginning, `post` loaders run at the end. * docs(sponsors): update segment's donations (#1603) * fix(fetch): fix some issues when parsing remote content (#1604) The previous regex was a simpler approach to the lead in content issue in fetched plugin/loader readmes, however it wasn't targeted enough to correctly remove all lead in content. The new approach should be a bit more stable but honestly the real fix here would be so better standardize/enforce the readme template before including these packages in the documentation site. I also think we can simplify the template a bit to make the parsing of these readme easier. Resolves #1600 * docs(guides): fix typo in code-splitting (#1606) * docs(config): update `inline` recommendation in dev-server (#1540) Update tip based on discussion in #1540. * docs(config): update pfx description in dev-server (#1595) Clarify the difference between using `pfx` via the command line and in a configuration. * docs(config): clarify stats option sort and default (#1596) * docs(config): add before/after hook info to dev-server (#1608) * docs(guides): fix typo in development (#1609) * docs(guides): fix typo in production.md (#1610) * docs(readme): fix typos (#1615) * fix(markdown): fix issue with multiple pipes in a single cell (#1611) Introduced better fix for pipes escaping in Markdown table cells. * docs(guides): update hot-module-replacement (#1614) Second argument of `server.listen` is a hostname, in this context, `'localhost'`. The third argument of `server.listen` is the success callback... https://github.com/webpack/webpack-dev-server/blob/master/lib/Server.js#L552 * docs(guides): fix `onClick` instances in caching (#1613) * docs(config): fix typo in module.md (#1618) * docs(guides): fix grammar in getting-started.md (#1619) * docs(config): add filename to index example (#1620) * docs(guides): update wds options in hot-module-replacement (#1617) Define the host property of the options object and set it to 'localhost'. The webpack-dev-server CLI defaults the host to 'localhost', but `addDevServerEntrypoints` from the webpack-dev-server Node.js API does not set a default and leaves it undefined, which will eventually throw "Uncaught SyntaxError: The URL 'http:/sockjs-node' is invalid" in the browser when following the code example. webpack/webpack-dev-server#1129 * fix(sponsors): opencollective api changed, add validation (#1622) * docs(development): update how-to-write-a-loader.md (#1621) Changes `_` to `.` to have correct code. * update /content/loaders & /content/plugins * update contributors * docs(plugins): add deepChildren to commons-chunk-plugin.md (#1625) * feat(sponsors): highlight latest sponsors/backers (#1628) * refactor: update information architecture This commit contains the following changes: - Merge support and development into a coherent "Contribute" section. - Flatten `/api/plugins` in preparation for flattened page `group`ing. - Sort "Contribute" section and rewrite index page using "Why Support?". - Simplify and organize antwar config as much as possible. - Move `title` / `description` fields to the actual components. BREAKING CHANGE: The route restructuring and content reorg breaks some routes. Before this is merged, we should make sure to add redirects for anything broken. * refactor(navigation): update routes and styling Simplify routing to reflect antwar and content changes and remove extraneous links. Simplify styling to first improve the design, but also to provide a lot more breathing room so less hacks are needed for smaller page sizes. With the updated design we should have room for "Voting" and "Analyze" links once those micro apps are in a better place. * fix: add link to starter kits "Support" is now included in the "Contribute" section and already has a link in the top navigation. The starter-kits page was previously hidden from users, so this exposes it a bit more. * refactor(navigation): update the navigation component Make minor styling change for consistent gutter. Extract link data into a separate JSON file. Update variable and parameter names for clarity. * feat: allow page grouping within sections via `group` field Add support for a new `group` field in each page's YAML frontmatter to group pages together in an intuitive way. The benefit of this approach vs directories is that changing a pages group within the same top-level section won't affect its route and thus will not break links to it. * style(page): align content better on larger screens * docs: remove empty pages * docs(contribute): add writers-guide and update release-process * docs: sort the base pages more intuitively * docs(api): update page names and grouping * fix(mobile): clean up mobile sidebar data * docs(api): clean up formatting and fix linting errors * docs(api): fix markdown listing issues * docs(contribute): fix markdown linting issues * docs(api): rewrite the index page * docs(api): minor formatting and cleanup * docs: add redirects for all broken routes The changes in #1612 break a significant amount of pre-existing URLs, this commit adds redirects for everything I could see that would be broken. * style(page): fix small padding issue The padding here is useful for browsers that display a full on scrollbar instead of an overlay scrollbar. We can continue to think about how that space it utilized in future commits/prs. * docs(guides): update production.md (#1629) Modify the doc accordingly to the following tweetstorm where Dan Abramov & Sean Larkin kindly explained this to me. https://twitter.com/TheLarkInn/status/917524723579338752 * fix(markdown): wrap inline code (#1634) This change makes inline code blocks wrap so long lines will not be hidden outside paragraph. Resolves #1633 * docs(guides): fix small typo excluding closing brace (#1637) * docs(guides): fix typo in development.md (#1638) * docs(guides): update hot-module-replacement.md (#1639) Maintain consistent code from previous guide (development). * docs(guides): maintain consistent code in production.md (#1640) * docs(guides): update typescript.md Configure TypeScript to compile modules to ES2015 module syntax, enabling webpack to resolve the `import` / `export` syntax on it's own. With this included, the only thing necessary to enable _tree shaking_ is the inclusion of the `UglifyJSPlugin` (which I'm not adding to this article as it is just centered on getting started with TypeScript). Resolves #1627 * update /content/loaders & /content/plugins * fix LinkDropdown * 修复 npm 命令错误导致编译不成功的问题

grisanu changed the title ~~Update /guides/environment-variables to include webpack CLI option --env~~ Update environment variables guide to use webpack CLI option --env Aug 25, 2017

grisanu force-pushed the Edit-guide-on-environment-variables-to-include-webpack-cli-option-env branch from 3452a51 to 0030d30 Compare August 26, 2017 03:04

skipjack added Guides Enhancement labels Aug 26, 2017

skipjack mentioned this pull request Aug 26, 2017

Guides - Tree Shaking and Production Rewrites #1508

Merged

TheLarkInn reviewed Aug 27, 2017

View reviewed changes

grisanu force-pushed the Edit-guide-on-environment-variables-to-include-webpack-cli-option-env branch 4 times, most recently from bc4b23f to c63ba38 Compare August 29, 2017 18:11

ChrisChinchilla reviewed Aug 30, 2017

View reviewed changes

grisanu force-pushed the Edit-guide-on-environment-variables-to-include-webpack-cli-option-env branch 2 times, most recently from 58250dc to 9ee77c8 Compare August 30, 2017 22:48

grisanu added 5 commits September 5, 2017 10:53

docs(guides): Add documentation about setting environment variables i…

85f167d

…n CLI with --env

docs(api): Link webpack CLI Environment options section to guide

b2c5fdd

docs(api): Add additional usage to --env webpack CLI docs

8b7ccc2

docs(api): Change this to the

1940879

docs(guide): Fix typo and grammatical errors

11b83f5

grisanu force-pushed the Edit-guide-on-environment-variables-to-include-webpack-cli-option-env branch from 9ee77c8 to 11b83f5 Compare September 5, 2017 17:53

skipjack added 2 commits September 6, 2017 00:54

Merge branch 'master' into Edit-guide-on-environment-variables-to-inc…

3efcde4

…lude-webpack-cli-option-env

docs(guides): fix formatting in environment-variables

1da91a2

skipjack approved these changes Sep 15, 2017

View reviewed changes

skipjack and others added 2 commits September 15, 2017 08:47

Merge branch 'master' into Edit-guide-on-environment-variables-to-inc…

3f69531

…lude-webpack-cli-option-env

docs(guide): Fix syntax error in code block

37906eb

skipjack merged commit cdf2c87 into webpack:master Sep 18, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

grisanu commented Aug 25, 2017 •

edited

Loading

TheLarkInn Aug 27, 2017

grisanu Aug 28, 2017

ChrisChinchilla Aug 30, 2017

ChrisChinchilla Aug 30, 2017

ChrisChinchilla Aug 30, 2017

ChrisChinchilla left a comment

TheLarkInn commented Aug 30, 2017

grisanu commented Aug 30, 2017

TheDutchCoder commented Aug 31, 2017

skipjack left a comment

grisanu commented Sep 18, 2017

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

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

Conversation

grisanu commented Aug 25, 2017 • edited Loading

TheLarkInn Aug 27, 2017

Choose a reason for hiding this comment

grisanu Aug 28, 2017

Choose a reason for hiding this comment

ChrisChinchilla Aug 30, 2017

Choose a reason for hiding this comment

ChrisChinchilla Aug 30, 2017

Choose a reason for hiding this comment

ChrisChinchilla Aug 30, 2017

Choose a reason for hiding this comment

ChrisChinchilla left a comment

Choose a reason for hiding this comment

TheLarkInn commented Aug 30, 2017

grisanu commented Aug 30, 2017

TheDutchCoder commented Aug 31, 2017

skipjack left a comment

Choose a reason for hiding this comment

grisanu commented Sep 18, 2017

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

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

grisanu commented Aug 25, 2017 •

edited

Loading