From 448601c91d84bb4d9af84ad726cd59581ee05d21 Mon Sep 17 00:00:00 2001 From: chenxsan Date: Thu, 12 Aug 2021 18:43:02 +0800 Subject: [PATCH 1/7] docs(configuration): fix heading level --- src/content/configuration/output.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/configuration/output.mdx b/src/content/configuration/output.mdx index 5873a591147e..9a533a17c16f 100644 --- a/src/content/configuration/output.mdx +++ b/src/content/configuration/output.mdx @@ -443,7 +443,7 @@ module.exports = { }; ``` -## `output.filename` +## output.filename `string` `function (pathData, assetInfo) => string` @@ -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)): From 45228ff7c1af3b2d1873522425203f42eea668d1 Mon Sep 17 00:00:00 2001 From: chenxsan Date: Thu, 12 Aug 2021 18:44:37 +0800 Subject: [PATCH 2/7] docs(configuration): move output.futureEmitAssets --- src/content/configuration/output.mdx | 34 ++++++++++++++-------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/content/configuration/output.mdx b/src/content/configuration/output.mdx index 9a533a17c16f..20c15b9aef80 100644 --- a/src/content/configuration/output.mdx +++ b/src/content/configuration/output.mdx @@ -629,6 +629,23 @@ 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.futureEmitAssets + +`boolean = false` + +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. + +W> `output.futureEmitAssets` option will be removed in webpack v5.0.0 and this behaviour will become the new default. + +```javascript +module.exports = { + //... + output: { + futureEmitAssets: true, + }, +}; +``` + ## `output.globalObject` `string = 'window'` @@ -2160,23 +2177,6 @@ module.exports = { }; ``` -## `output.futureEmitAssets` - -`boolean = false` - -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. - -W> `output.futureEmitAssets` option will be removed in webpack v5.0.0 and this behaviour will become the new default. - -```javascript -module.exports = { - //... - output: { - futureEmitAssets: true, - }, -}; -``` - ## `output.wasmLoading` `boolean = false` `string` From e39ecb671b5f1ec702ab84080b73b80ad55053db Mon Sep 17 00:00:00 2001 From: chenxsan Date: Thu, 12 Aug 2021 18:52:52 +0800 Subject: [PATCH 3/7] docs(configuration): move output.uniqueName --- src/content/configuration/output.mdx | 42 ++++++++++++++-------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/src/content/configuration/output.mdx b/src/content/configuration/output.mdx index 20c15b9aef80..a21d0761e5e5 100644 --- a/src/content/configuration/output.mdx +++ b/src/content/configuration/output.mdx @@ -668,27 +668,6 @@ module.exports = { }; ``` -## `output.uniqueName` - -`string` - -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 `''`. - -`output.uniqueName` will be used to generate unique globals for: - -- [`output.chunkLoadingGlobal`](/configuration/output/#outputchunkloadingglobal) - -**webpack.config.js** - -```javascript -module.exports = { - // ... - output: { - uniqueName: 'my-package-xyz', - }, -}; -``` - ## `output.hashDigest` `string = 'hex'` @@ -2158,6 +2137,27 @@ module.exports = { }; ``` +## output.uniqueName + +`string` + +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 `''`. + +`output.uniqueName` will be used to generate unique globals for: + +- [`output.chunkLoadingGlobal`](/configuration/output/#outputchunkloadingglobal) + +**webpack.config.js** + +```javascript +module.exports = { + // ... + output: { + uniqueName: 'my-package-xyz', + }, +}; +``` + ## `output.workerChunkLoading` `string: 'require' | 'import-scripts' | 'async-node' | 'import' | 'universal'` `boolean: false` From c6e1b0df2c1920729d2436cbc9ce2a92a12157f1 Mon Sep 17 00:00:00 2001 From: chenxsan Date: Thu, 12 Aug 2021 18:53:49 +0800 Subject: [PATCH 4/7] docs(configuration): move output.importFunctionName --- src/content/configuration/output.mdx | 34 ++++++++++++++-------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/content/configuration/output.mdx b/src/content/configuration/output.mdx index a21d0761e5e5..5e095bb3190e 100644 --- a/src/content/configuration/output.mdx +++ b/src/content/configuration/output.mdx @@ -740,6 +740,23 @@ Customize the main hot update filename. `[fullhash]` and `[runtime]` are availab T> Typically you don't need to change `output.hotUpdateMainFilename`. +## 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. @@ -1845,23 +1862,6 @@ MyLibrary(_entry_return_); The dependencies for your library will be defined by the [`externals`](/configuration/externals/) config. -## `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.path` `string = path.join(process.cwd(), 'dist')` From 26e95ea1f567f72cfb77e44783000c332fa1f85c Mon Sep 17 00:00:00 2001 From: chenxsan Date: Thu, 12 Aug 2021 18:55:44 +0800 Subject: [PATCH 5/7] docs(configuration): move output.iife --- src/content/configuration/output.mdx | 30 ++++++++++++++-------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/content/configuration/output.mdx b/src/content/configuration/output.mdx index 5e095bb3190e..73d660f8e5dd 100644 --- a/src/content/configuration/output.mdx +++ b/src/content/configuration/output.mdx @@ -740,6 +740,21 @@ 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'` @@ -2197,21 +2212,6 @@ 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.module` `boolean = false` From d2a55e5efe5614e95ed6fe25837aacc61e40dd93 Mon Sep 17 00:00:00 2001 From: chenxsan Date: Thu, 12 Aug 2021 18:58:13 +0800 Subject: [PATCH 6/7] docs(configuration): move output.module --- src/content/configuration/output.mdx | 48 ++++++++++++++-------------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/src/content/configuration/output.mdx b/src/content/configuration/output.mdx index 73d660f8e5dd..beb95509e987 100644 --- a/src/content/configuration/output.mdx +++ b/src/content/configuration/output.mdx @@ -1877,6 +1877,30 @@ MyLibrary(_entry_return_); The dependencies for your library will be defined by the [`externals`](/configuration/externals/) config. +## output.module + +`boolean = false` + +Output JavaScript files as module type. Disabled by default as it's an experimental feature. + +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: { + 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')` @@ -2211,27 +2235,3 @@ module.exports = { }, }; ``` - -## `output.module` - -`boolean = false` - -Output JavaScript files as module type. Disabled by default as it's an experimental feature. - -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: { - module: true, - }, -}; -``` - -W> `output.module` is an experimental feature and can only be enabled by setting [`experiments.outputModule`](/configuration/experiments/#experiments) to `true`. From a6f5aebc68fadbc025f3f73c2ebc42690a1573f5 Mon Sep 17 00:00:00 2001 From: chenxsan Date: Thu, 12 Aug 2021 18:59:23 +0800 Subject: [PATCH 7/7] docs(configuration): move output.workerChunkLoading --- src/content/configuration/output.mdx | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/content/configuration/output.mdx b/src/content/configuration/output.mdx index beb95509e987..41fc705edf02 100644 --- a/src/content/configuration/output.mdx +++ b/src/content/configuration/output.mdx @@ -2197,41 +2197,41 @@ module.exports = { }; ``` -## `output.workerChunkLoading` +## output.wasmLoading -`string: 'require' | 'import-scripts' | 'async-node' | 'import' | 'universal'` `boolean: false` +`boolean = false` `string` -The new option `workerChunkLoading` controls the chunk loading of workers. +Option to set the method of loading WebAssembly Modules. Methods included by default are `'fetch'` (web/WebWorker), `'async-node'` (Node.js), but others might be added by plugins. -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). +The default value can be affected by different [`target`](/configuration/target/): -**webpack.config.js** +- Defaults to `'fetch'` if [`target`](/configuration/target/) is set to `'web'`, `'webworker'`, `'electron-renderer'` or `'node-webkit'`. +- Defaults to `'async-node'` if [`target`](/configuration/target/) is set to `'node'`, `'async-node'`, `'electron-main'` or `'electron-preload'`. ```javascript module.exports = { //... output: { - workerChunkLoading: false, + wasmLoading: 'fetch', }, }; ``` -## `output.wasmLoading` +## output.workerChunkLoading -`boolean = false` `string` +`string: 'require' | 'import-scripts' | 'async-node' | 'import' | 'universal'` `boolean: false` -Option to set the method of loading WebAssembly Modules. Methods included by default are `'fetch'` (web/WebWorker), `'async-node'` (Node.js), but others might be added by plugins. +The new option `workerChunkLoading` controls the chunk loading of workers. -The default value can be affected by different [`target`](/configuration/target/): +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). -- Defaults to `'fetch'` if [`target`](/configuration/target/) is set to `'web'`, `'webworker'`, `'electron-renderer'` or `'node-webkit'`. -- Defaults to `'async-node'` if [`target`](/configuration/target/) is set to `'node'`, `'async-node'`, `'electron-main'` or `'electron-preload'`. +**webpack.config.js** ```javascript module.exports = { //... output: { - wasmLoading: 'fetch', + workerChunkLoading: false, }, }; ```