From adb26a2fded537a30c9526a689499e88b89f4adb Mon Sep 17 00:00:00 2001 From: Hai Date: Tue, 8 Sep 2026 18:05:27 +0800 Subject: [PATCH] docs: correct outdated concepts and inaccurate statements --- src/content/concepts/entry-points.mdx | 2 +- src/content/concepts/hot-module-replacement.mdx | 2 +- src/content/concepts/index.mdx | 5 +++-- src/content/concepts/loaders.mdx | 2 +- src/content/concepts/module-federation.mdx | 7 ++++--- src/content/concepts/output.mdx | 2 +- src/content/concepts/plugins.mdx | 2 +- 7 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/content/concepts/entry-points.mdx b/src/content/concepts/entry-points.mdx index 7b6e33cb1b04..84d82dcad8df 100644 --- a/src/content/concepts/entry-points.mdx +++ b/src/content/concepts/entry-points.mdx @@ -26,7 +26,7 @@ The result of this process is later written to disk according to the `output` configuration, which controls where and how the bundled files are emitted. -T> When running webpack without a configuration file, the entry defaults to `'./src/index.js'`. If that file is missing — even if your `src/` directory exists — webpack will throw:
**`ERROR in Entry module not found: Error: Can't resolve './src'`**

The error says `'./src'` rather than `'./src/index.js'` because webpack resolves the directory first, then fails to find `index.js` inside it. To use a different entry filename, configure the `entry` option as shown in the sections below. +T> When running webpack without a configuration file, the entry defaults to `'./src'`, which webpack resolves to `./src/index.js` through `resolve.mainFiles` and `resolve.extensions`. If that file is missing — even if your `src/` directory exists — webpack will throw:
**`Module not found: Error: Can't resolve './src' in '/path/to/project'`**

The error names `'./src'` because that is the actual entry request; `index.js` is only the default file looked up inside it. To use a different entry filename, configure the `entry` option as shown in the sections below. ## Single Entry (Shorthand) Syntax diff --git a/src/content/concepts/hot-module-replacement.mdx b/src/content/concepts/hot-module-replacement.mdx index 93790687c05e..82386a4d244d 100644 --- a/src/content/concepts/hot-module-replacement.mdx +++ b/src/content/concepts/hot-module-replacement.mdx @@ -38,7 +38,7 @@ In addition to normal assets, the compiler needs to emit an "update" to allow up 1. The updated [manifest](/concepts/manifest) (JSON) 2. One or more updated chunks (JavaScript) -The manifest contains the new compilation hash and a list of all updated chunks. Each of these chunks contains the new code for all updated modules (or a flag indicating that the module was removed). +The manifest lists the ids of the updated chunks, the removed chunks and the removed modules. Each update chunk contains the new code for its updated modules; the update for the runtime chunk also carries the new compilation hash. The compiler ensures that module IDs and chunk IDs are consistent between these builds. It typically stores these IDs in memory (e.g. with [webpack-dev-server](/configuration/dev-server/)), but it's also possible to store them in a JSON file. diff --git a/src/content/concepts/index.mdx b/src/content/concepts/index.mdx index 7ab7f8c465f8..16b3cbdada86 100644 --- a/src/content/concepts/index.mdx +++ b/src/content/concepts/index.mdx @@ -60,7 +60,7 @@ export default { }; ``` -T> When running webpack without a configuration file, the entry defaults to `'./src/index.js'`. If that file does not exist — even if your `src/` directory does — webpack will throw:
**`ERROR in Entry module not found: Error: Can't resolve './src'`**

The error says `'./src'` rather than `'./src/index.js'` because webpack resolves the directory first and then fails to find the default `index.js` inside it. To use a different entry filename, add a `webpack.config.js` as shown in the example above. +T> When running webpack without a configuration file, the entry defaults to `'./src'`, which webpack resolves to `./src/index.js` through `resolve.mainFiles` and `resolve.extensions`. If that file does not exist — even if your `src/` directory does — webpack will throw:
**`Module not found: Error: Can't resolve './src' in '/path/to/project'`**

The error names `'./src'` because that is the actual entry request; `index.js` is only the default file looked up inside it. To use a different entry filename, add a `webpack.config.js` as shown in the example above. T> Learn more in the [entry points](/concepts/entry-points) section. @@ -74,6 +74,7 @@ You can configure this part of the process by specifying an `output` field in yo ```js import path from "node:path"; +import { fileURLToPath } from "node:url"; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); @@ -93,7 +94,7 @@ T> The `output` property has [many more configurable features](/configuration/ou ## Loaders -Out of the box, webpack only understands JavaScript and JSON files. **Loaders** allow webpack to process other types of files and convert them into valid [modules](/concepts/modules) that can be consumed by your application and added to the dependency graph. +Out of the box, webpack understands JavaScript, JSON and WebAssembly files, as well as CSS and HTML through its built-in support ([Native CSS](/guides/native-css/), [Native HTML](/guides/native-html/)), which is enabled by default. **Loaders** allow webpack to process other types of files and convert them into valid [modules](/concepts/modules) that can be consumed by your application and added to the dependency graph. W> One of webpack's specific features is the ability to `import` any type of module, e.g. `.css` files, which may not be supported by other bundlers or task runners. We feel this extension of the language is warranted as it allows developers to build a more accurate dependency graph. diff --git a/src/content/concepts/loaders.mdx b/src/content/concepts/loaders.mdx index 8d7232350e04..48f3f43dc15c 100644 --- a/src/content/concepts/loaders.mdx +++ b/src/content/concepts/loaders.mdx @@ -120,7 +120,7 @@ T> Use `module.rules` whenever possible, as this will reduce boilerplate in your ## Loader Features -- Loaders can be chained. Each loader in the chain applies transformations to the processed resource. A chain is executed in reverse order. The first loader passes its result (resource with applied transformations) to the next one, and so forth. Finally, webpack expects JavaScript to be returned by the last loader in the chain. +- Loaders can be chained. Each loader in the chain applies transformations to the processed resource. A chain is executed in reverse order. The first loader passes its result (resource with applied transformations) to the next one, and so forth. Finally, webpack expects the last loader in the chain to return content that matches the module's `type`: JavaScript for `javascript/*` modules, CSS for `css/*`, JSON for `json` and raw content for `asset/*`. - Loaders can be synchronous or asynchronous. - Loaders run in Node.js and can do everything that’s possible there. - Loaders can be configured with an `options` object (using `query` parameters to set options is still supported but has been deprecated). diff --git a/src/content/concepts/module-federation.mdx b/src/content/concepts/module-federation.mdx index dffc3ec442da..25823761ba4f 100644 --- a/src/content/concepts/module-federation.mdx +++ b/src/content/concepts/module-federation.mdx @@ -66,7 +66,7 @@ This plugin creates an additional container entry with the specified exposed mod ### ContainerReferencePlugin (low level) -This plugin adds specific references to containers as externals and allows to import remote modules from these containers. It also calls the `override` API of these containers to provide overrides to them. Local overrides (via `__webpack_override__` or `override` API when build is also a container) and specified overrides are provided to all referenced containers. +This plugin adds specific references to containers as externals (of the configured `remoteType`) and allows to import remote modules from these containers. At runtime it initializes the share scope via `__webpack_init_sharing__`, which passes that scope to the `init()` method of each referenced container, and then loads remote modules through the container's `get()` method. ### ModuleFederationPlugin (high level) @@ -118,13 +118,14 @@ It can be leveraged to connect remote containers to a host container dynamically const container = globalThis.someContainer; // or get the container somewhere else // Initialize the container, it may provide shared modules await container.init(__webpack_share_scopes__.default); - const module = await container.get("./module"); + const factory = await container.get("./module"); + const module = factory(); })(); ``` T> A **container** is the remote container entry object exposed by a federated build, usually through that remote's `remoteEntry.js`. It provides the `get` and `init` methods shown here. In examples like `window[scope]` or `globalThis.someContainer`, the container is expected to exist only once the remote container script has already loaded. -The container tries to provide shared modules, but if the shared module has already been used, a warning and the provided shared module will be ignored. The container might still use it as a fallback. +The container tries to provide shared modules, but if the shared module has already been used (loaded), the newly provided one is ignored without a warning. The container might still use it as a fallback. This way you could dynamically load an A/B test which provides a different version of a shared module. diff --git a/src/content/concepts/output.mdx b/src/content/concepts/output.mdx index c78d277f89c2..c82c5a74ab88 100644 --- a/src/content/concepts/output.mdx +++ b/src/content/concepts/output.mdx @@ -31,7 +31,7 @@ This configuration would output a single `bundle.js` file into the `dist` direct ## Multiple Entry Points -If your configuration creates more than a single "chunk" (as with multiple entry points or when using plugins like CommonsChunkPlugin), you should use [substitutions](/configuration/output/#outputfilename) to ensure that each file has a unique name. +If your configuration creates more than a single "chunk" (as with multiple entry points or when using [`optimization.splitChunks`](/configuration/optimization/#optimizationsplitchunks), the `SplitChunksPlugin`), you should use [substitutions](/configuration/output/#outputfilename) to ensure that each file has a unique name. ```js import path from "node:path"; diff --git a/src/content/concepts/plugins.mdx b/src/content/concepts/plugins.mdx index b163bc68dfcc..ae11dd79220c 100644 --- a/src/content/concepts/plugins.mdx +++ b/src/content/concepts/plugins.mdx @@ -28,7 +28,7 @@ const pluginName = "ConsoleLogOnBuildWebpackPlugin"; class ConsoleLogOnBuildWebpackPlugin { apply(compiler) { - compiler.hooks.run.tap(pluginName, (compilation) => { + compiler.hooks.run.tap(pluginName, (compiler) => { console.log("The webpack build process is starting!"); }); }