Skip to content

Commit 363650f

Browse files
committed
Discuss params when webpack.config.js exports a function
* Expand on how --env arguments gets translated into the env parameter. * Briefly explain the argv parameter.
1 parent bdf4dbb commit 363650f

File tree

2 files changed

+31
-18
lines changed

2 files changed

+31
-18
lines changed

content/api/cli.md

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -110,16 +110,6 @@ Specifies a different [configuration](/configuration) file to pick up. Use this
110110
webpack --config example.config.js
111111
```
112112

113-
**Specify build environment**
114-
115-
Send [environment](/configuration/configuration-types) variable to be used in webpack config file.
116-
117-
118-
```bash
119-
webpack --env.production # sets production to true
120-
webpack --env.platform=web # sets platform to "web"
121-
```
122-
123113
**Print result of webpack as a JSON**
124114

125115
```bash
@@ -129,6 +119,25 @@ webpack --json > stats.json
129119

130120
In every other case, webpack prints out a set of stats showing bundle, chunk and timing details. Using this option the output can be a JSON object. This response is accepted by webpack's [analyse tool](https://webpack.github.com/analyse), or chrisbateman's [webpack-visualizer](https://chrisbateman.github.io/webpack-visualizer/), or th0r's [webpack-bundle-analyzer](https://github.com/th0r/webpack-bundle-analyzer). The analyse tool will take in the JSON and provide all the details of the build in graphical form.
131121

122+
### Environment Options
123+
124+
When the webpack configuration [exports a function](/configuration/configuration-types#exporting-a-function), an "environment" may be passed to it.
125+
126+
```bash
127+
webpack --env.production # sets env.production == true
128+
webpack --env.platform=web # sets env.platform == "web"
129+
```
130+
131+
The `--env` argument accepts various syntaxes:
132+
133+
| Invocation | Resulting environment |
134+
|-------------------------------|-----------------------------|
135+
| webpack --env prod | `"prod"` |
136+
| webpack --env.prod | `{ prod: true }` |
137+
| webpack --env.prod=1 | `{ prod: 1 }` |
138+
| webpack --env.prod=foo | `{ prod: "foo" }` |
139+
| webpack --env.prod --env.min | `{ prod: true, min: true }` |
140+
| webpack --env.prod --env min | `[{ prod: true }, "min"]` |
132141

133142
### Output Options
134143

content/configuration/configuration-types.md

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,25 @@ contributors:
1111
Besides exporting a single config object, there are a few more ways that cover other needs as well.
1212

1313

14-
## Exporting a function to use `--env`
14+
## Exporting a Function
1515

1616
Eventually you will find the need to disambiguate in your `webpack.config.js` between [development](/guides/development) and [production builds](/guides/production). You have (at least) two options:
1717

18-
Instead of exporting a configuration object, you may return a function which accepts an environment as argument. When running webpack, you may specify build environment keys via `--env`, such as `--env.production` or `--env.platform=web`.
18+
One option is to export a function from your webpack config instead of exporting an object. The function will be invoked with two arguments:
19+
20+
* An environment as the first parameter. See the [environment options CLI documentation](/api/cli#environment-options) for syntax examples.
21+
* An options map (`argv`) as the second parameter. This describes the options passed to webpack, with keys such as [`output-filename`](/api/cli/#output-options) and [`optimize-minimize`](/api/cli/#optimize-options).
1922

2023
```diff
2124
-module.exports = {
22-
+module.exports = function(env) {
25+
+module.exports = function(env, argv) {
2326
+ return {
24-
plugins: [
25-
new webpack.optimize.UglifyJsPlugin({
26-
+ compress: env.production // compress only in production build
27-
})
28-
]
27+
+ devtool: env.production ? 'source-maps' : 'eval',
28+
plugins: [
29+
new webpack.optimize.UglifyJsPlugin({
30+
+ compress: argv['optimize-minimize'] // only if -p or --optimize-minimize were passed
31+
})
32+
]
2933
+ };
3034
};
3135
```

0 commit comments

Comments
 (0)