Skip to content

Explain the possible parameters when webpack.config.js exports a function #1479

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

Merged
merged 1 commit into from
Aug 7, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 19 additions & 10 deletions content/api/cli.md
Original file line number Diff line number Diff line change
Expand Up @@ -110,16 +110,6 @@ Specifies a different [configuration](/configuration) file to pick up. Use this
webpack --config example.config.js
```

**Specify build environment**

Send [environment](/configuration/configuration-types) variable to be used in webpack config file.


```bash
webpack --env.production # sets production to true
webpack --env.platform=web # sets platform to "web"
```

**Print result of webpack as a JSON**

```bash
Expand All @@ -129,6 +119,25 @@ webpack --json > stats.json

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.

### Environment Options

When the webpack configuration [exports a function](/configuration/configuration-types#exporting-a-function), an "environment" may be passed to it.

```bash
webpack --env.production # sets env.production == true
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"]` |

### Output Options

Expand Down
20 changes: 12 additions & 8 deletions content/configuration/configuration-types.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,25 @@ contributors:
Besides exporting a single config object, there are a few more ways that cover other needs as well.


## Exporting a function to use `--env`
## Exporting a Function

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:

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`.
One option is to export a function from your webpack config instead of exporting an object. The function will be invoked with two arguments:

* An environment as the first parameter. See the [environment options CLI documentation](/api/cli#environment-options) for syntax examples.
* 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).

```diff
-module.exports = {
+module.exports = function(env) {
+module.exports = function(env, argv) {
+ return {
plugins: [
new webpack.optimize.UglifyJsPlugin({
+ compress: env.production // compress only in production build
})
]
+ devtool: env.production ? 'source-maps' : 'eval',
plugins: [
new webpack.optimize.UglifyJsPlugin({
+ compress: argv['optimize-minimize'] // only if -p or --optimize-minimize were passed
})
]
+ };
};
```
Expand Down