diff --git a/src/content/configuration/output.mdx b/src/content/configuration/output.mdx index 738267c451a4..89f90296f08c 100644 --- a/src/content/configuration/output.mdx +++ b/src/content/configuration/output.mdx @@ -1586,11 +1586,18 @@ T> Read the [authoring libraries guide](/guides/author-libraries/) guide for mor ### output.library.export -Specify which export should be exposed as a library. +Specify which export should be exposed as a library.In other words, this option lets you control which part of your module is exposed when used by other applications. + +By default, the entire module (namespace object) is exposed. However, in many cases, you may want to expose only a specific export, such as the default export or a particular function. - Type: `string | string[]` -It is `undefined` by default, which will export the whole (namespace) object. The examples below demonstrate the effect of this configuration when using [`output.library.type: 'var'`](#type-var). +It is `undefined` by default, which will export the whole (namespace) object. + +### Explanation +By default, webpack exposes the entire module, but you can configure it to export only a specific part. + +#### Example: exporting the default export ```js export default { @@ -1611,7 +1618,10 @@ The default export of your entry point will be assigned to the library name: const MyLibrary = _entry_return_.default; ``` -You can pass an array to `output.library.export` as well, it will be interpreted as a path to a module to be assigned to the library name: +You can pass an array to `output.library.export` as well... + +### Simplified Explanation +This allows you to access nested properties inside your module. ```js export default { @@ -1765,7 +1775,7 @@ MySubModule.doSomething(); W> Please use [`output.library.type`](#outputlibrarytype) instead as we might drop support for `output.libraryTarget` in the future. -Configure how the library will be exposed. Any one of the following options can be used. Please note that this option works in conjunction with the value assigned to [`output.library`](#outputlibrary). For the following examples, it is assumed that the value of [`output.library`](#outputlibrary) is configured as `MyLibrary`. +Configure how the library is exposed and accessed by consumers in different environments (such as browser, Node.js, or module systems). This option defines the format of the generated bundle and how it will be consumed by other applications.Any one of the following options can be used. Please note that this option works in conjunction with the value assigned to [`output.library`](#outputlibrary). For the following examples, it is assumed that the value of [`output.library`](#outputlibrary) is configured as `MyLibrary`. T> Note that `_entry_return_` in the example code below is the value returned by the entry point. In the bundle itself, it is the output of the function that is generated by webpack from the entry point. diff --git a/src/content/contribute/writers-guide.mdx b/src/content/contribute/writers-guide.mdx index d868007beeab..7e9660075686 100644 --- a/src/content/contribute/writers-guide.mdx +++ b/src/content/contribute/writers-guide.mdx @@ -155,7 +155,57 @@ Please do not assume things are simple. Avoid words like 'just', 'simply'. ### Configuration defaults and types -Always provide types and defaults to all of the documentation options in order to keep the documentation accessible and well-written. We are adding types and defaults after entitling the documented option: +Webpack configuration defaults can vary depending on the selected mode. The two used are `development` and `production`, and each applies different default optimizations. + +#### Development mode defaults + +- Optimized for debugging +- Includes useful warnings and error messages +- Output is readable and not minified +- Faster incremental builds + +#### Production mode defaults + +- Optimized for performance +- Output is minified and optimized +- Removes unnecessary code (e.g. dead code elimination) +- Smaller bundle size + +#### Example + +```js +module.exports = { + mode: "development", +}; +``` + +Always provide types and defaults for all documented options to keep the documentation clear and accessible. Types and defaults should be added after introducing the option. + +Webpack configuration defaults can vary depending on the selected mode. The two used are `development` and `production`, and each applies different default optimizations. + +#### Development mode defaults + +- Optimized for debugging +- Includes useful warnings and error messages +- Output is readable and not minified +- Faster incremental builds + +#### Production mode defaults + +- Optimized for performance +- Output is minified and optimized +- Removes unnecessary code (e.g. dead code elimination) +- Smaller bundle size + +#### Example + +```js +module.exports = { + mode: "development", +}; +``` + +Always provide types and defaults for all documented options to keep the documentation clear and accessible. Types and defaults should be added after introducing the option. **configuration.example.option** @@ -223,3 +273,7 @@ An example can be found on the [`options` section of the EvalSourceMapDevToolPlu ### Adding links Please use relative URLs (such as `/concepts/mode/`) to link our own content instead of absolute URLs (such as `https://webpack.js.org/concepts/mode/`). + +```js + +```