Skip to content

docs(configuration): sort output options alphabetically #5292

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 7 commits into from
Aug 13, 2021
Merged
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
150 changes: 75 additions & 75 deletions src/content/configuration/output.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -443,7 +443,7 @@ module.exports = {
};
```

## `output.filename`
## output.filename

`string` `function (pathData, assetInfo) => string`

Expand Down Expand Up @@ -537,7 +537,7 @@ Note this option is called filename but you are still allowed to use something l

Note this option does not affect output files for on-demand-loaded chunks. It only affects output files that are initially loaded. For on-demand-loaded chunk files the [`output.chunkFilename`](#outputchunkfilename) option is used. Files created by loaders also aren't affected. In this case you would have to try the specific loader's available options.

## Template strings
### Template strings

The following substitutions are available in template strings (via webpack's internal [`TemplatedPathPlugin`](https://github.com/webpack/webpack/blob/master/lib/TemplatedPathPlugin.js)):

Expand Down Expand Up @@ -629,45 +629,41 @@ type ModulePathData = {

T> In some context properties will use JavaScript code expressions instead of raw values. In these cases the `WithLength` variant is available and should be used instead of slicing the original value.

## `output.globalObject`

`string = 'window'`
## output.futureEmitAssets

When targeting a library, especially when `libraryTarget` is `'umd'`, this option indicates what global object will be used to mount the library. To make UMD build available on both browsers and Node.js, set `output.globalObject` option to `'this'`. Defaults to `self` for Web-like targets.
`boolean = false`

For example:
Tells webpack to use the future version of asset emitting logic, which allows freeing memory of assets after emitting. It could break plugins which assume that assets are still readable after they were emitted.

**webpack.config.js**
W> `output.futureEmitAssets` option will be removed in webpack v5.0.0 and this behaviour will become the new default.

```javascript
module.exports = {
// ...
//...
output: {
library: 'myLib',
libraryTarget: 'umd',
filename: 'myLib.js',
globalObject: 'this',
futureEmitAssets: true,
},
};
```

## `output.uniqueName`

`string`
## `output.globalObject`

A unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to [`output.library`](/configuration/output/#outputlibrary) name or the package name from `package.json` in the context, if both aren't found, it is set to an `''`.
`string = 'window'`

`output.uniqueName` will be used to generate unique globals for:
When targeting a library, especially when `libraryTarget` is `'umd'`, this option indicates what global object will be used to mount the library. To make UMD build available on both browsers and Node.js, set `output.globalObject` option to `'this'`. Defaults to `self` for Web-like targets.

- [`output.chunkLoadingGlobal`](/configuration/output/#outputchunkloadingglobal)
For example:

**webpack.config.js**

```javascript
module.exports = {
// ...
output: {
uniqueName: 'my-package-xyz',
library: 'myLib',
libraryTarget: 'umd',
filename: 'myLib.js',
globalObject: 'this',
},
};
```
Expand Down Expand Up @@ -744,6 +740,38 @@ Customize the main hot update filename. `[fullhash]` and `[runtime]` are availab

T> Typically you don't need to change `output.hotUpdateMainFilename`.

## output.iife

`boolean = true`

Tells webpack to add [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) wrapper around emitted code.

```javascript
module.exports = {
//...
output: {
iife: true,
},
};
```

## output.importFunctionName

`string = 'import'`

The name of the native `import()` function. Can be used for polyfilling, e.g. with [`dynamic-import-polyfill`](https://github.com/GoogleChromeLabs/dynamic-import-polyfill).

**webpack.config.js**

```javascript
module.exports = {
//...
output: {
importFunctionName: '__import__',
},
};
```

## output.library

Output a library exposing the exports of your entry point.
Expand Down Expand Up @@ -1849,23 +1877,30 @@ MyLibrary(_entry_return_);

The dependencies for your library will be defined by the [`externals`](/configuration/externals/) config.

## `output.importFunctionName`
## output.module

`string = 'import'`
`boolean = false`

The name of the native `import()` function. Can be used for polyfilling, e.g. with [`dynamic-import-polyfill`](https://github.com/GoogleChromeLabs/dynamic-import-polyfill).
Output JavaScript files as module type. Disabled by default as it's an experimental feature.

**webpack.config.js**
When enabled, webpack will set [`output.iife`](#outputiife) to `false`, [`output.scriptType`](#outputscripttype) to `'module'` and `terserOptions.module` to `true` internally.

If you're using webpack to compile a library to be consumed by others, make sure to set [`output.libraryTarget`](#librarytarget-module) to `'module'` when `output.module` is `true`.

```javascript
module.exports = {
//...
experiments: {
outputModule: true,
},
output: {
importFunctionName: '__import__',
module: true,
},
};
```

W> `output.module` is an experimental feature and can only be enabled by setting [`experiments.outputModule`](/configuration/experiments/#experiments) to `true`.

## `output.path`

`string = path.join(process.cwd(), 'dist')`
Expand Down Expand Up @@ -2141,43 +2176,28 @@ module.exports = {
};
```

## `output.workerChunkLoading`

`string: 'require' | 'import-scripts' | 'async-node' | 'import' | 'universal'` `boolean: false`

The new option `workerChunkLoading` controls the chunk loading of workers.

T> The default value of this option is depending on the `target` setting. For more details, search for `"workerChunkLoading"`: [in the webpack defaults](https://github.com/webpack/webpack/blob/master/lib/config/defaults.js).

**webpack.config.js**
## output.uniqueName

```javascript
module.exports = {
//...
output: {
workerChunkLoading: false,
},
};
```
`string`

## `output.futureEmitAssets`
A unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to [`output.library`](/configuration/output/#outputlibrary) name or the package name from `package.json` in the context, if both aren't found, it is set to an `''`.

`boolean = false`
`output.uniqueName` will be used to generate unique globals for:

Tells webpack to use the future version of asset emitting logic, which allows freeing memory of assets after emitting. It could break plugins which assume that assets are still readable after they were emitted.
- [`output.chunkLoadingGlobal`](/configuration/output/#outputchunkloadingglobal)

W> `output.futureEmitAssets` option will be removed in webpack v5.0.0 and this behaviour will become the new default.
**webpack.config.js**

```javascript
module.exports = {
//...
// ...
output: {
futureEmitAssets: true,
uniqueName: 'my-package-xyz',
},
};
```

## `output.wasmLoading`
## output.wasmLoading

`boolean = false` `string`

Expand All @@ -2197,41 +2217,21 @@ module.exports = {
};
```

## `output.iife`

`boolean = true`

Tells webpack to add [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) wrapper around emitted code.

```javascript
module.exports = {
//...
output: {
iife: true,
},
};
```
## output.workerChunkLoading

## `output.module`

`boolean = false`
`string: 'require' | 'import-scripts' | 'async-node' | 'import' | 'universal'` `boolean: false`

Output JavaScript files as module type. Disabled by default as it's an experimental feature.
The new option `workerChunkLoading` controls the chunk loading of workers.

When enabled, webpack will set [`output.iife`](#outputiife) to `false`, [`output.scriptType`](#outputscripttype) to `'module'` and `terserOptions.module` to `true` internally.
T> The default value of this option is depending on the `target` setting. For more details, search for `"workerChunkLoading"`: [in the webpack defaults](https://github.com/webpack/webpack/blob/master/lib/config/defaults.js).

If you're using webpack to compile a library to be consumed by others, make sure to set [`output.libraryTarget`](#librarytarget-module) to `'module'` when `output.module` is `true`.
**webpack.config.js**

```javascript
module.exports = {
//...
experiments: {
outputModule: true,
},
output: {
module: true,
workerChunkLoading: false,
},
};
```

W> `output.module` is an experimental feature and can only be enabled by setting [`experiments.outputModule`](/configuration/experiments/#experiments) to `true`.