fix(docs): resolve few more guide TODOs links and fixed warning tags (#168)

docs: resolve guide TODO links and fixed warning tags

Author: ryzrr

pages/blog/posts/2020-10-10-webpack-5-release.md

@@ -819,7 +819,8 @@ As webpack 5 differs between different issuing dependencies so it might make sen
 
 ## Major Internal Changes
 
-?> This section might need a bit more refinement
+> [!NOTE]
+> This section might need a bit more refinement
 
 The following changes are only relevant for plugin authors:
 

pages/blog/posts/2020-12-08-roadmap-2021.md

@@ -85,7 +85,8 @@ Currently I'm not yet sure if this is worth it, but it's at least worth looking
 Currently it's not possible to generate ESM exports for a bundle via `output.library.type: "module"`.
 This can be useful when integrating webpack bundles into ESM loading environments or inline scripts.
 
-T> For webpack 4 there is actually a plugin, but native support would be preferable.
+> [!TIP]
+> For webpack 4 there is actually a plugin, but native support would be preferable.
 
 #### ESM externals (import)
 
@@ -112,7 +113,8 @@ export default {
 };
 ```
 
-W> Using multiple different ESM CDNs will not work. This is only an example.
+> [!WARNING]
+> Using multiple different ESM CDNs will not work. This is only an example.
 
 #### ESM library
 

pages/blog/posts/2026-04-08-webpack-5-106.md

@@ -99,7 +99,8 @@ module.exports = {
 };
 ```
 
-W> CSS support has matured significantly and is expected to be fully finalized in the next minor release, as planned in the roadmap. As part of this transition, `css-loader`, `style-loader`, and `mini-css-extract-plugin` are planned for deprecation.
+> [!WARNING]
+> CSS support has matured significantly and is expected to be fully finalized in the next minor release, as planned in the roadmap. As part of this transition, `css-loader`, `style-loader`, and `mini-css-extract-plugin` are planned for deprecation.
 
 ## Better Tree Shaking for CommonJS Destructuring
 

pages/blog/posts/2026-05-19-webpack-5-107.md

@@ -42,7 +42,8 @@ Explore what's new:
 
 ## HTML Modules (Experimental)
 
-W> **This feature is experimental and partial.** Webpack 5.107 only implements the `html-loader` side of the story: importing an HTML file from JavaScript runs its tag references through the webpack pipeline. **HTML entry points** (using a `.html` file directly as `entry`, the `html-webpack-plugin` part) are **not supported yet** and are planned for the next minor release. The full story is tracked in issue [#536](https://github.com/webpack/webpack/issues/536).
+> [!WARNING]
+> **This feature is experimental and partial.** Webpack 5.107 only implements the `html-loader` side of the story: importing an HTML file from JavaScript runs its tag references through the webpack pipeline. **HTML entry points** (using a `.html` file directly as `entry`, the `html-webpack-plugin` part) are **not supported yet** and are planned for the next minor release. The full story is tracked in issue [#536](https://github.com/webpack/webpack/issues/536).
 
 A real-world webpack setup that needs an HTML entry point has historically required at least two extra dependencies. The first is `html-webpack-plugin`, which generates or emits the HTML file and injects the right bundle URLs into it. The second is `html-loader`, which lets webpack walk through `<img src>`, `<link href>`, `<script src>`, and friends so those references go through the normal resolver and asset pipeline.
 
@@ -165,7 +166,8 @@ The comment value is parsed with the same context the JS and CSS parsers use, so
 
 ## TypeScript Support (Experimental)
 
-W> **This feature is experimental and depends on a recent Node.js.** It requires Node.js 22.6 or later for the stable `module.stripTypeScriptTypes` API. The transform handles only erasable TypeScript syntax (see limitations below). For anything else, keep using `ts-loader` or `swc-loader`.
+> [!WARNING]
+> **This feature is experimental and depends on a recent Node.js.** It requires Node.js 22.6 or later for the stable `module.stripTypeScriptTypes` API. The transform handles only erasable TypeScript syntax (see limitations below). For anything else, keep using `ts-loader` or `swc-loader`.
 
 Webpack 5.107 adds first-class TypeScript support behind a new `experiments.typescript` flag. With it enabled, webpack compiles `.ts`, `.cts`, and `.mts` files directly through Node.js's built-in [`module.stripTypeScriptTypes`](https://nodejs.org/api/module.html#modulestriptypescripttypescode-options), no external loader required. The flag is also turned on automatically by [`experiments.futureDefaults`](/configuration/experiments/#experimentsfuturedefaults).
 
@@ -460,7 +462,8 @@ const unused = createLogger('debug');
 realWork();
 ```
 
-W> The annotation currently only takes effect **within the module where it is declared**. Cross-module propagation is planned for a future PR.
+> [!WARNING]
+> The annotation currently only takes effect **within the module where it is declared**. Cross-module propagation is planned for a future PR.
 
 ## Resolver Updates
 

pages/guides/getting-started/concepts/index.md

@@ -118,7 +118,7 @@ You can learn more about including loaders in the [loaders section](/guides/gett
 While loaders transform certain types of modules, plugins can perform a much wider range of tasks, such as bundle optimization, asset management, and injecting environment variables.
 
 > [!TIP]
-> Check out the [plugin interface](#TODO[/api/plugins]) and how to use it to extend webpack's capabilities.
+> Check out the [plugin interface](/docs/api/plugins/types#interface-webpackplugininstance) and how to use it to extend webpack's capabilities.
 
 To use a plugin, you `import` it and add it to the `plugins` array. Most plugins are customizable through options. Since you can use a plugin multiple times in a configuration for different purposes, you create an instance of it by calling it with the `new` operator.
 

pages/guides/getting-started/concepts/modules.md

@@ -42,7 +42,7 @@ Beyond these, webpack supports modules written in many other languages and prepr
 
 And many more. In short, webpack offers a powerful, rich API for customization that lets you use it with **any stack** while remaining **non-opinionated** about your development, testing, and production workflows.
 
-For a complete list, see [the list of loaders](/docs/loaders) or learn how to [write your own](#TODO[/api/loaders]).
+For a complete list, see [the list of loaders](/docs/loaders) or learn how to [write your own](/docs/api/loaders/types).
 
 ## Further reading
 

pages/guides/getting-started/concepts/under-the-hood.md

@@ -90,7 +90,7 @@ A non-initial chunk for `./app.jsx` is created because that module is imported d
 - `/dist/main.js` — an `initial` chunk
 - `/dist/394.js` — a `non-initial` chunk
 
-By default, `non-initial` chunks have no name, so a unique ID is used instead. When using a dynamic import, you can specify a chunk name explicitly with a ["magic" comment](#TODO[/api/module-methods/#magic-comments]):
+By default, `non-initial` chunks have no name, so a unique ID is used instead. When using a dynamic import, you can specify a chunk name explicitly with a ["magic" comment](/guides/optimization/code-splitting/#magic-comments):
 
 ```jsx
 import(

pages/guides/getting-started/index.md

@@ -390,4 +390,4 @@ webpack-demo
 > [!WARNING]
 > Do not compile untrusted code with webpack. It could lead to execution of malicious code on your computer, on remote servers, or in the web browsers of your application's end users.
 
-If you want to learn more about webpack's design, you can check out the [basic concepts](/guides/getting-started/concepts) and [configuration](#TODO[/configuration]) pages. Furthermore, the [API](#TODO[/api]) section digs into the various interfaces webpack offers.
+If you want to learn more about webpack's design, you can check out the [basic concepts](/guides/getting-started/concepts) and [configuration](#TODO[/configuration]) pages. Furthermore, the [API](/docs/api/types) section digs into the various interfaces webpack offers.

pages/guides/migration/to-v3.md

@@ -429,7 +429,7 @@ require.ensure([], require => {
 });
 ```
 
-The ES2015 loader spec defines [`import()`](#TODO[/api/module-methods/#import-1]) as the way to load ES2015 modules dynamically at runtime. webpack treats `import()` as a split point and places the requested module in a separate chunk. `import()` takes the module name as its argument and returns a Promise.
+The ES2015 loader spec defines [`import()`](/guides/optimization/code-splitting/#dynamic-imports) as the way to load ES2015 modules dynamically at runtime. webpack treats `import()` as a split point and places the requested module in a separate chunk. `import()` takes the module name as its argument and returns a Promise.
 
 ```js
 function onClick() {

pages/guides/optimization/code-splitting/index.md

@@ -328,7 +328,7 @@ webpack 5.x.x compiled successfully in 268 ms
 > );
 > ```
 >
-> This helps webpack tree shake the other unused exports. See [Magic Comments](#TODO[/api/module-methods/#magic-comments]) for details.
+> This helps webpack tree shake the other unused exports. See [Magic Comments](#magic-comments) for details.
 
 Because `import()` returns a promise, it can be used with [`async` functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). Here's how that simplifies the code:
 
@@ -357,7 +357,7 @@ Because `import()` returns a promise, it can be used with [`async` functions](ht
 ```
 
 > [!TIP]
-> You can also provide a [dynamic expression](#TODO[/api/module-methods/#dynamic-expressions-in-import]) to `import()` when you need to import a specific module based on a value computed later.
+> You can also provide a [dynamic expression](/guides/modules-and-dependencies/dependency-management/#dynamic-expressions-in-import-or-require) to `import()` when you need to import a specific module based on a value computed later.
 
 ### Understanding ChunkLoadError
 
@@ -373,6 +373,42 @@ If you encounter this error:
 
 For more context, see the related discussion in the webpack issue tracker.
 
+## Magic Comments
+
+webpack lets you attach inline comments to a dynamic `import()` to control how the resulting chunk is named, split, and loaded. These "magic comments" go inside the `import()` call, immediately before the module request:
+
+```js
+import(/* webpackChunkName: "my-chunk" */ './module');
+```
+
+You can combine several in a single `import()`:
+
+```js
+import(
+  /* webpackChunkName: "my-chunk" */
+  /* webpackMode: "lazy" */
+  './module'
+);
+```
+
+The following comments are supported:
+
+- **`webpackChunkName`** - a string that names the generated chunk, so it appears as, for example, `my-chunk.js` instead of a numeric id. Imports that share the same name are bundled into the same chunk.
+- **`webpackMode`** - controls how the module is resolved and split. One of:
+  - `"lazy"` (default) - generates a separate lazy-loadable chunk for the module.
+  - `"lazy-once"` - generates a single lazy-loadable chunk shared by every module matched by a [dynamic expression](/guides/modules-and-dependencies/dependency-management/#dynamic-expressions-in-import-or-require).
+  - `"eager"` - no separate chunk is generated; the module is bundled into the current chunk and no extra network request is made. `import()` still returns a `Promise`, but it resolves immediately.
+  - `"weak"` - the module is used only if it has already been loaded some other way; otherwise the returned `Promise` rejects.
+- **`webpackPrefetch`** - `true` or a number. Marks the chunk as a prefetch resource. See [Prefetching/Preloading modules](#prefetchingpreloading-modules) below.
+- **`webpackPreload`** - `true` or a number. Marks the chunk as a preload resource. See [Prefetching/Preloading modules](#prefetchingpreloading-modules) below.
+- **`webpackFetchPriority`** - `"high"`, `"low"`, or `"auto"`. Sets the fetch priority hint used when loading the chunk.
+- **`webpackExports`** - a string or an array of strings. Tells webpack to only bundle the named exports of the imported module, which helps it tree shake the rest.
+- **`webpackInclude`** / **`webpackExclude`** - a regular expression that limits which modules are bundled when you pass a [dynamic expression](/guides/modules-and-dependencies/dependency-management/#dynamic-expressions-in-import-or-require) to `import()`. `webpackInclude` bundles only matching modules; `webpackExclude` skips matching ones.
+- **`webpackIgnore`** - set to `true` to disable webpack's processing for this `import()`. webpack leaves the statement untouched, so it stays a native dynamic import at runtime and is never bundled or split.
+
+> [!NOTE]
+> `require.context` and `import.meta.webpackContext` accept a similar set of options (such as `mode`), but as properties of an options object rather than as inline comments. See [Dependency Management](/guides/modules-and-dependencies/dependency-management) for details.
+
 ## Prefetching/Preloading modules
 
 webpack 4.6.0+ adds support for prefetching and preloading.