webpack · alexander-akait · Sep 11, 2026 · Sep 8, 2026 · Sep 9, 2026 · Sep 9, 2026
diff --git a/src/content/guides/asset-modules.mdx b/src/content/guides/asset-modules.mdx
@@ -148,7 +148,7 @@ All `.png` files will be emitted to the output directory and their paths will be
 
 ### Custom output filename
 
-By default, `asset/resource` modules are emitting with `[hash][ext][query]` filename into output directory.
+By default, `asset/resource` modules are emitting with `[hash][ext][query][fragment]` filename into output directory.
 
 You can modify this template by setting [`output.assetModuleFilename`](/configuration/output/#outputassetmodulefilename) in your webpack configuration:
 
@@ -373,10 +373,10 @@ new URL(
 // target: webworker
 new URL(`${__webpack_public_path__}logo.svg`, self.location);
 
-// target: node, node-webkit, nwjs, electron-main, electron-renderer, electron-preload, async-node
+// target: node, node-webkit, nwjs, electron-main, electron-preload, async-node
 new URL(
   `${__webpack_public_path__}logo.svg`,
-  require("node:url").pathToFileUrl(__filename),
+  require("node:url").pathToFileURL(__filename),
 );
 ```
 

diff --git a/src/content/guides/caching.mdx b/src/content/guides/caching.mdx
@@ -259,13 +259,13 @@ Running another build, we would expect only our `main` bundle's hash to change,
 ...
 ```
 
-... we can see that all three have. This is because each [`module.id`](/api/module-variables/#moduleid-commonjs) is incremented based on resolving order by default. Meaning when the order of resolving is changed, the IDs will be changed as well. To recap:
+... we can see that all three have. This happens when each [`module.id`](/api/module-variables/#moduleid-commonjs) is assigned from the resolving order (`optimization.moduleIds: 'natural'`), which webpack 5 only does by default for `mode: 'none'`. Meaning when the order of resolving is changed, the IDs will be changed as well. To recap:
 
 - The `main` bundle changed because of its new content.
 - The `vendor` bundle changed because its `module.id` was changed.
 - And, the `runtime` bundle changed because it now contains a reference to a new module.
 
-The first and last are expected, it's the `vendor` hash we want to fix. Let's use [`optimization.moduleIds`](/configuration/optimization/#optimizationmoduleids) with `'deterministic'` option:
+The first and last are expected, it's the `vendor` hash we want to fix. `production` mode already defaults [`optimization.moduleIds`](/configuration/optimization/#optimizationmoduleids) to `'deterministic'` and `development` mode to `'named'`, both stable across builds; setting `'deterministic'` explicitly keeps the ids stable regardless of `mode`:
 
 **webpack.config.js**
 

diff --git a/src/content/guides/development-vagrant.mdx b/src/content/guides/development-vagrant.mdx
@@ -22,10 +22,10 @@ Vagrant.configure("2") do |config|
 end
 ```
 
-Next, install `webpack`, `webpack-cli`, `@webpack-cli/serve`, and `webpack-dev-server` in your project;
+Next, install `webpack`, `webpack-cli`, and `webpack-dev-server` in your project;
 
 ```bash
-npm install --save-dev webpack webpack-cli @webpack-cli/serve webpack-dev-server
+npm install --save-dev webpack webpack-cli webpack-dev-server
 ```
 
 Make sure to have a `webpack.config.js` file. If you haven't already, use this as a minimal example to get started:
@@ -43,13 +43,13 @@ export default {
 };
 ```
 
-And create an `index.html` file. The script tag should point to your bundle. If `output.filename` is not specified in the config, this will be `bundle.js`.
+And create an `index.html` file. The script tag should point to your bundle. If `output.filename` is not specified in the config, this will be `main.js` (`[name].js` for the default `main` entry).
 
 ```html
 <!DOCTYPE html>
 <html>
   <head>
-    <script src="/bundle.js" charset="utf-8"></script>
+    <script src="/main.js" charset="utf-8"></script>
   </head>
   <body>
     <h2>Hey!</h2>

diff --git a/src/content/guides/ecma-script-modules.mdx b/src/content/guides/ecma-script-modules.mdx
@@ -173,28 +173,30 @@ export default {
 
 CommonJS syntax is not available in ESM: `require`, `module`, `exports`, `__filename`, `__dirname`.
 
-When importing from a CommonJS module inside ESM, only the `default` export
-is available (the entire `module.exports` object):
+When webpack bundles a CommonJS module imported from ESM, both the `default`
+import (the entire `module.exports` object) and named imports (its properties) work:
 
 ```js
 // esm-consumer.js (ESM)
 import cjs from "./cjs-module.js";
-// named imports from CJS don't work
-import { foo } from "./cjs-module.js"; // undefined
+import { foo } from "./cjs-module.js";
 
 // cjs-module.js (CommonJS)
 module.exports = { foo: 1, bar: 2 };
 
-console.log(cjs.foo); // works - cjs is the whole exports object
+console.log(cjs.foo); // 1 - cjs is the whole exports object
+console.log(foo); // 1 - named imports read properties of module.exports
 ```
 
-This strict behavior applies when webpack treats the **imported** module as CommonJS.
+This interop applies when webpack treats the **imported** module as CommonJS.
 If that module itself uses ESM `export` syntax, webpack will auto-detect it as ESM
-and named imports will work normally. This commonly affects projects that mix `.js` files
+and use its exports directly. This commonly affects projects that mix `.js` files
 files in a project that has `"type": "module"` set - webpack may treat some files as
 ESM while third-party packages in `node_modules` remain CommonJS.
 
-T> To get named exports from CommonJS modules, consider migrating to ESM
+T> This is webpack's bundling behavior. When Node.js itself loads a CommonJS module from ESM,
+T> named imports only work if Node.js can detect them statically; otherwise only the `default`
+T> import is available - consider migrating to ESM
 T> or using [`@babel/plugin-transform-modules-commonjs`](https://babeljs.io/docs/babel-plugin-transform-modules-commonjs).
 
 ## Common Migration Errors

diff --git a/src/content/guides/hot-module-replacement.mdx b/src/content/guides/hot-module-replacement.mdx
@@ -134,9 +134,8 @@ you can also provide manual entry points for HMR:
   };
 ```
 
-T> [`output.htmlFilename`](/configuration/output/#outputhtmlfilename) resolves `[name]` from the page's own filename, so the emitted document stays `index.html` whatever the entry is called.
-
 T> You can use the CLI to modify the [webpack-dev-server](https://github.com/webpack/webpack-dev-server) configuration with the following command: `webpack serve --hot-only`.
+T> [`output.htmlFilename`](/configuration/output/#outputhtmlfilename) resolves `[name]` from the page's own filename, so the emitted document stays `index.html` whatever the entry is called.
 
 Now let's update the `index.js` file so that when a change inside `print.js` is detected we tell webpack to accept the updated module.
 

diff --git a/src/content/guides/lazy-loading.mdx b/src/content/guides/lazy-loading.mdx
@@ -244,7 +244,8 @@ export const greeting = "Bonjour";
 
 ```text
 const language = navigator.language.split("-")[0]; // "en", "fr", etc.
-const locale = import.defer("./locales/" + language + ".js");
+// Resolves to a deferred namespace; nothing is evaluated yet.
+const locale = await import.defer("./locales/" + language + ".js");
 
 document.getElementById("btn").addEventListener("click", () => {
   // The locale module is evaluated here, on first property access.

diff --git a/src/content/guides/native-css.mdx b/src/content/guides/native-css.mdx
@@ -72,12 +72,12 @@ Webpack processes the CSS and includes it in the build output.
 
 Native CSS introduces four [`Rule.type`](/configuration/module/#ruletype) values. Knowing which one applies is the key to migrating, because each maps to a different `css-loader` `modules.mode`:
 
-| Type         | Scoping                                                                         | `css-loader` equivalent  |
-| ------------ | ------------------------------------------------------------------------------- | ------------------------ |
-| `css`        | Global, no CSS Modules parsing                                                  | `modules: false`         |
-| `css/global` | Global selectors, but `:local()` is honored                                     | `modules.mode: 'global'` |
-| `css/module` | Local by default, `:global()` escapes to global                                 | `modules.mode: 'local'`  |
-| `css/auto`   | Picks `css/module` for `*.module.css` / `*.modules.css`, otherwise `css/global` | `modules.auto: true`     |
+| Type         | Scoping                                                                                                         | `css-loader` equivalent  |
+| ------------ | --------------------------------------------------------------------------------------------------------------- | ------------------------ |
+| `css`        | Global, no CSS Modules parsing                                                                                  | `modules: false`         |
+| `css/global` | Global selectors, but `:local()` is honored                                                                     | `modules.mode: 'global'` |
+| `css/module` | Local by default, `:global()` escapes to global                                                                 | `modules.mode: 'local'`  |
+| `css/auto`   | Picks `css/module` for `*.module.css` / `*.modules.css`, otherwise plain `css` (global, no CSS Modules parsing) | `modules.auto: true`     |
 
 The default rule webpack adds for `/\.css$/i` is `css/auto`, so `*.module.css` files become CSS Modules and everything else stays global — matching the most common `css-loader` configuration out of the box.
 
@@ -220,7 +220,7 @@ Native CSS resolves `@custom-media` and `@custom-selector` at build time, so the
 }
 ```
 
-Resolution is file-local — a definition applies to the file that declares it (and to what that file `@import`s) rather than to the whole project. Both are on by default and can be switched off individually with [`module.parser.css.customMedia`](/configuration/module/#moduleparsercsscustommedia) and [`module.parser.css.customSelectors`](/configuration/module/#moduleparsercsscustomselectors), which is what you want if a PostCSS plugin in your chain already handles them.
+Resolution is file-local — a definition applies only to the file that declares it, not to the files it `@import`s nor to the whole project. Both are on by default and can be switched off individually with [`module.parser.css.customMedia`](/configuration/module/#moduleparsercsscustommedia) and [`module.parser.css.customSelectors`](/configuration/module/#moduleparsercsscustomselectors), which is what you want if a PostCSS plugin in your chain already handles them.
 
 ## Minification
 
@@ -435,13 +435,13 @@ Native CSS extracts stylesheets and adds content hashes to them by default (`exp
 
 Map the remaining plugin options:
 
-| `mini-css-extract-plugin` | Native equivalent                                                               |
-| ------------------------- | ------------------------------------------------------------------------------- |
-| `filename`                | [`output.cssFilename`](/configuration/output/#outputcssfilename)                |
-| `chunkFilename`           | [`output.cssChunkFilename`](/configuration/output/#outputcsschunkfilename)      |
-| loader `publicPath`       | [`output.publicPath`](/configuration/output/#outputpublicpath)                  |
-| loader `esModule`         | generator [`esModule`](/configuration/module/#modulegenerator) (default `true`) |
-| `ignoreOrder`             | n/a — native CSS does not emit order-conflict warnings                          |
+| `mini-css-extract-plugin` | Native equivalent                                                                                                                                                                                                                      |
+| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `filename`                | [`output.cssFilename`](/configuration/output/#outputcssfilename)                                                                                                                                                                       |
+| `chunkFilename`           | [`output.cssChunkFilename`](/configuration/output/#outputcsschunkfilename)                                                                                                                                                             |
+| loader `publicPath`       | [`output.publicPath`](/configuration/output/#outputpublicpath)                                                                                                                                                                         |
+| loader `esModule`         | generator [`esModule`](/configuration/module/#modulegenerator) (default `true`)                                                                                                                                                        |
+| `ignoreOrder`             | n/a — the order-conflict warning cannot be silenced per option; use [`ignoreWarnings`](/configuration/other-options/#ignorewarnings), or `CssModulesPlugin.getCompilationHooks(compilation).orderModules` to define the order yourself |
 
 **webpack.config.js**