diff --git a/src/content/api/compilation-hooks.md b/src/content/api/compilation-hooks.md index 4176a13240bc..091b4a4f5f03 100644 --- a/src/content/api/compilation-hooks.md +++ b/src/content/api/compilation-hooks.md @@ -1,7 +1,7 @@ --- title: Compilation Hooks group: Plugins -sort: 9 +sort: 10 contributors: - byzyk - madhavarshney diff --git a/src/content/api/compilation-object.md b/src/content/api/compilation-object.md index 516a7a4dc5ab..7b58933f3a56 100644 --- a/src/content/api/compilation-object.md +++ b/src/content/api/compilation-object.md @@ -1,7 +1,7 @@ --- title: Compilation Object group: Objects -sort: 13 +sort: 14 contributors: - EugeneHlushko --- diff --git a/src/content/api/compiler-hooks.md b/src/content/api/compiler-hooks.md index 25d306536c15..cd3946a85136 100644 --- a/src/content/api/compiler-hooks.md +++ b/src/content/api/compiler-hooks.md @@ -1,7 +1,7 @@ --- title: Compiler Hooks group: Plugins -sort: 8 +sort: 9 contributors: - rishantagarwal - byzyk @@ -248,6 +248,13 @@ Called after emitting assets to output directory. - Callback Parameters: `compilation` +### `assetEmitted` + +`AsyncSeriesHook` + +Allows to get byte content of emitted asset. Available since webpack v4.39.0 + +- Callback Parameters: `file`, `content` ### `done` diff --git a/src/content/api/logging.md b/src/content/api/logging.md new file mode 100644 index 000000000000..616e6369a5cb --- /dev/null +++ b/src/content/api/logging.md @@ -0,0 +1,59 @@ +--- +title: Logger Interface +sort: 6 +contributors: + - EugeneHlushko +--- + +T> Available since webpack 4.39.0 + +Logging output is an additional way to display messages to the end users. + +webpack logger is available to [loaders](/loaders/) and [plugins](/api/plugins/#logging). Emitting as part of the [Stats](/api/stats/) and configured by the user in [webpack configuration](/configuration/). + +Benefits of custom logging API in webpack: + +- Common place to [configure the logging](/configuration/stats/#stats) display level +- Logging output exportable as part of the `stats.json` +- Stats presets affect logging output +- Plugins can affect logging capturing and display level +- When using multiple plugins and loaders they use a common logging solution +- CLI, UI tools for webpack may choose different ways to display logging +- webpack core can emit logging output, e.g. timing data + +By introducing webpack logging API we hope to unify the way webpack plugins and loaders emit logging messages and allow better ways to inspect build problems. Integrated logging solution supports plugins and loaders developers by improving their development experience. Paves the way for non-CLI webpack solutions like dashboards or other UIs. + +W> __Avoid noise in the log!__ Keep in mind that multiple plugins and loaders are used together. Loaders are usually processing multiple files and are invoked for every file. Choose logging level as low as possible to keep the log output informative. + +## Logger methods + +- `logger.error(...)`: for error messages +- `logger.warn(...)`: for warnings +- `logger.info(...)`: for __important__ information messages. These messages are displayed by default. Only use this for messages that the user really needs to see +- `logger.log(...)`: for __unimportant__ information messages. These messages are displayed only when user had opted-in to see them +- `logger.debug(...)`: for debugging information. These messages are displayed only when user had opted-in to see debug logging for specific modules +- `logger.trace()`: to display a stack trace. Displayed like `logger.debug` +- `logger.group(...)`: to group messages together. Displayed collapsed like `logger.log` +- `logger.groupEnd()`: to end a logging group +- `logger.groupCollapsed(...)`: to group messages together. Displayed collapsed like `logger.log`. Displayed expanded when logging level is set to `'verbose'` or `'debug'`. +- `logger.status`: writes a temporary message, setting a new status, overrides the previous one +- `logger.clear()`: to print a horizontal line. Displayed like `logger.log` +- `logger.profile(...)`, `logger.profileEnd(...)`: to capture a profile. Delegated to `console.profile` when supported + +## Runtime Logger API + +Runtime logger API is only intended to be used as a development tool, it is not intended to be included in [production mode](/configuration/mode/#mode-production). + +- `const logging = require('webpack/logging/runtime')`: to use the logger in runtime, require it directly from webpack +- `logging.getLogger('name')`: to get individual logger by name +- `logging.configureDefaultLogger(...)`: to override the default logger. + +```javascript +const logging = require('webpack/logging/runtime'); +logging.configureDefaultLogger({ + level: 'log', + debug: /something/ +}); +``` + +- `logging.hooks.log`: to apply Plugins to the runtime logger \ No newline at end of file diff --git a/src/content/api/module-methods.md b/src/content/api/module-methods.md index 8eb0cd5cd000..dd6209bba4dc 100644 --- a/src/content/api/module-methods.md +++ b/src/content/api/module-methods.md @@ -1,7 +1,7 @@ --- title: Module Methods group: Modules -sort: 6 +sort: 7 contributors: - skipjack - sokra diff --git a/src/content/api/module-variables.md b/src/content/api/module-variables.md index ca67393ca461..61464e291072 100644 --- a/src/content/api/module-variables.md +++ b/src/content/api/module-variables.md @@ -1,7 +1,7 @@ --- title: Module Variables group: Modules -sort: 7 +sort: 8 contributors: - skipjack - sokra diff --git a/src/content/api/parser.md b/src/content/api/parser.md index cbcd162aaf76..dbd18e95dd86 100644 --- a/src/content/api/parser.md +++ b/src/content/api/parser.md @@ -1,7 +1,7 @@ --- title: Parser Hooks group: Plugins -sort: 10 +sort: 11 contributors: - byzyk - DeTeam diff --git a/src/content/api/plugins.md b/src/content/api/plugins.md index b7009c22221d..ffce94d2029d 100644 --- a/src/content/api/plugins.md +++ b/src/content/api/plugins.md @@ -1,7 +1,7 @@ --- title: Plugin API group: Plugins -sort: 11 +sort: 12 contributors: - thelarkinn - pksjce diff --git a/src/content/api/resolvers.md b/src/content/api/resolvers.md index 2abb8a370924..bce1df12c2b4 100644 --- a/src/content/api/resolvers.md +++ b/src/content/api/resolvers.md @@ -1,7 +1,7 @@ --- title: Resolvers group: Plugins -sort: 12 +sort: 13 contributors: - EugeneHlushko --- diff --git a/src/content/configuration/devtool.md b/src/content/configuration/devtool.md index 72fe92941a9c..b05cb0045188 100644 --- a/src/content/configuration/devtool.md +++ b/src/content/configuration/devtool.md @@ -30,23 +30,21 @@ T> The webpack repository contains an [example showing the effect of all `devtoo T> Instead of using the `devtool` option you can also use `SourceMapDevToolPlugin`/`EvalSourceMapDevToolPlugin` directly as it has more options. Never use both the `devtool` option and plugin together. The `devtool` option adds the plugin internally so you would end up with the plugin applied twice. -devtool | build | rebuild | production | quality ------------------------------- | ----- | ------- | ---------- | ----------------------------- -(none) | +++ | +++ | yes | bundled code -eval | +++ | +++ | no | generated code -cheap-eval-source-map | + | ++ | no | transformed code (lines only) -cheap-module-eval-source-map | o | ++ | no | original source (lines only) -eval-source-map | -- | + | no | original source -cheap-source-map | + | o | yes | transformed code (lines only) -cheap-module-source-map | o | - | yes | original source (lines only) -inline-cheap-source-map | + | o | no | transformed code (lines only) -inline-cheap-module-source-map | o | - | no | original source (lines only) -source-map | -- | -- | yes | original source -inline-source-map | -- | -- | no | original source -hidden-source-map | -- | -- | yes | original source -nosources-source-map | -- | -- | yes | without source content - -T> `+++` super fast, `++` fast, `+` pretty fast, `o` medium, `-` pretty slow, `--` slow +devtool | build | rebuild | production | quality +------------------------------ | ------- | ------- | ---------- | ----------------------------- +(none) | fastest | fastest | yes | bundled code +eval | fastest | fastest | no | generated code +cheap-eval-source-map | fast | faster | no | transformed code (lines only) +cheap-module-eval-source-map | slow | faster | no | original source (lines only) +eval-source-map | slowest | fast | no | original source +cheap-source-map | fast | slow | yes | transformed code (lines only) +cheap-module-source-map | slow | slower | yes | original source (lines only) +inline-cheap-source-map | fast | slow | no | transformed code (lines only) +inline-cheap-module-source-map | slow | slower | no | original source (lines only) +source-map | slowest | slowest | yes | original source +inline-source-map | slowest | slowest | no | original source +hidden-source-map | slowest | slowest | yes | original source +nosources-source-map | slowest | slowest | yes | without source content Some of these values are suited for development and some for production. For development you typically want fast Source Maps at the cost of bundle size, but for production you want separate Source Maps that are accurate and support minimizing. diff --git a/src/content/configuration/optimization.md b/src/content/configuration/optimization.md index e1ae1040dc79..81dc9eebca91 100644 --- a/src/content/configuration/optimization.md +++ b/src/content/configuration/optimization.md @@ -90,7 +90,7 @@ By default webpack v4+ provides new common chunks strategies out of the box for `object` `string` `boolean` -Setting `optimization.runtimeChunk` to `true` or `"multiple"` adds an additional chunk to each entrypoint containing only the runtime. This setting is an alias for: +Setting `optimization.runtimeChunk` to `true` or `'multiple'` adds an additional chunk to each entrypoint containing only the runtime. This setting is an alias for: __webpack.config.js__ @@ -105,7 +105,7 @@ module.exports = { }; ``` -The value `"single"` instead creates a runtime file to be shared for all generated chunks. This setting is an alias for: +The value `'single'` instead creates a runtime file to be shared for all generated chunks. This setting is an alias for: __webpack.config.js__ @@ -254,7 +254,7 @@ module.exports = { `string` `bool: false` -Tells webpack to set `process.env.NODE_ENV` to a given string value. `optimization.nodeEnv` uses [DefinePlugin](/plugins/define-plugin/) unless set to `false`. `optimization.nodeEnv` __defaults__ to [mode](/configuration/mode/) if set, else falls back to `"production"`. +Tells webpack to set `process.env.NODE_ENV` to a given string value. `optimization.nodeEnv` uses [DefinePlugin](/plugins/define-plugin/) unless set to `false`. `optimization.nodeEnv` __defaults__ to [mode](/configuration/mode/) if set, else falls back to `'production'`. Possible values: @@ -291,9 +291,9 @@ module.exports = { ## `optimization.removeAvailableModules` -`bool` +`bool: false` -Tells webpack to detect and remove modules from chunks when these modules are already included in all parents. Setting `optimization.removeAvailableModules` to `false` will disable this optimization. Disabled by default for [mode](/configuration/mode/) `development` and enabled for [mode](/configuration/mode/) `production`. +Tells webpack to detect and remove modules from chunks when these modules are already included in all parents. Setting `optimization.removeAvailableModules` to `true` will enable this optimization. Enabled by default in [`production` mode](/configuration/mode/). __webpack.config.js__ @@ -301,7 +301,7 @@ __webpack.config.js__ module.exports = { //... optimization: { - removeAvailableModules: false + removeAvailableModules: true } }; ``` diff --git a/src/content/configuration/output.md b/src/content/configuration/output.md index 3bd0eeaff5fe..548697c2e905 100644 --- a/src/content/configuration/output.md +++ b/src/content/configuration/output.md @@ -319,17 +319,22 @@ Note this option does not affect output files for on-demand-loaded chunks. For t The following substitutions are available in template strings (via webpack's internal [`TemplatedPathPlugin`](https://github.com/webpack/webpack/blob/master/lib/TemplatedPathPlugin.js)): -| Template | Description | -| ----------- | ----------------------------------------------------------------------------------- | -| [hash] | The hash of the module identifier | -| [chunkhash] | The hash of the chunk content | -| [name] | The module name | -| [id] | The module identifier | -| [query] | The module query, i.e., the string following `?` in the filename | -| [function] | The function, which can return filename [string] | +| Template | Description | +| ------------- | ----------------------------------------------------------------------------------- | +| [hash] | The hash of the module identifier | +| [contenthash] | the hash of the content of a file, which is different for each asset | +| [chunkhash] | The hash of the chunk content | +| [name] | The module name | +| [id] | The module identifier | +| [query] | The module query, i.e., the string following `?` in the filename | +| [function] | The function, which can return filename [string] | The lengths of `[hash]` and `[chunkhash]` can be specified using `[hash:16]` (defaults to 20). Alternatively, specify [`output.hashDigestLength`](#outputhashdigestlength) to configure the length globally. +It is possible to filter out placeholder replacement when you want to use one of the placeholders in the actual file name. For example, to output a file `[name].js`, you have to escape the `[name]` placeholder by adding backslashes between the brackets. So that `[\name\]` generates `[name]` instead of getting replaced with the `name` of the asset. + +Example: `[\id\]` generates `[id]` instead of getting replaced with the `id`. + If using a function for this option, the function will be passed an object containing the substitutions in the table above. T> When using the [`ExtractTextWebpackPlugin`](/plugins/extract-text-webpack-plugin), use `[contenthash]` to obtain a hash of the extracted file (neither `[hash]` nor `[chunkhash]` work). @@ -1032,7 +1037,7 @@ module.exports = { `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. +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.