webpack · iblawal · Mar 19, 2026 · Apr 10, 2026 · Apr 10, 2026 · Apr 10, 2026
diff --git a/package.json b/package.json
@@ -112,7 +112,7 @@
     "directory-tree": "^3.6.0",
     "directory-tree-webpack-plugin": "^1.0.3",
     "duplexer": "^0.1.1",
-    "eslint": "^9.39.2",
+    "eslint": "^9.39.4",
     "eslint-config-webpack": "^4.9.3",
     "eslint-plugin-cypress": "^6.1.0",
     "eslint-plugin-mdx": "^3.6.2",
@@ -133,7 +133,7 @@
     "mdast-util-to-string": "^4.0.0",
     "mini-css-extract-plugin": "^2.10.1",
     "mkdirp": "^3.0.1",
-    "npm-run-all": "^4.1.1",
+    "npm-run-all": "^4.1.5",
     "postcss": "^8.5.8",
     "postcss-loader": "^8.2.0",
     "prettier": "^3.8.1",

diff --git a/src/content/api/index.mdx b/src/content/api/index.mdx
@@ -5,6 +5,38 @@ contributors:
   - tbroadley
 ---
 
+<div
+  style={{
+    padding: "1.5rem",
+    backgroundColor: "#fff3e0",
+    borderLeft: "6px solid #e65100",
+    borderRadius: "8px",
+    margin: "2rem 0",
+    color: "#4e342e",
+    fontSize: "0.95rem",
+  }}
+>
+  <h3 style={{ marginTop: 0, color: "#e65100" }}>API Reference Overview</h3>
+  <p>
+    The webpack API provides a set of low-level interfaces to interact with the
+    compiler. This is intended for advanced users and plugin/loader developers.
+  </p>
+  <ul style={{ marginBottom: 0 }}>
+    <li>
+      <strong>Compiler API:</strong> For external control over the webpack
+      execution.
+    </li>
+    <li>
+      <strong>Internal Hooks:</strong> Access the tapping system used by
+      plugins.
+    </li>
+    <li>
+      <strong>Stability:</strong> Use these interfaces to build custom tooling
+      on top of webpack.
+    </li>
+  </ul>
+</div>
+
 A variety of interfaces are available to customize the compilation process.
 Some features overlap between interfaces, e.g. a configuration option may be
 available via a CLI flag, while others exist only through a single interface.

diff --git a/src/content/concepts/index.mdx b/src/content/concepts/index.mdx
@@ -23,6 +23,46 @@ contributors:
   - saishankar404
 ---
 
+<div
+  style={{
+    padding: "1.5rem",
+    backgroundColor: "#f8f9fa",
+    borderLeft: "6px solid #1d71b8",
+    borderRadius: "8px",
+    margin: "2rem 0",
+    color: "#212529",
+    fontSize: "0.95rem",
+    lineHeight: "1.6",
+  }}
+>
+  <h3 style={{ marginTop: 0, color: "#1d71b8", fontSize: "1.25rem" }}>
+    Core Concepts Overview
+  </h3>
+  <p>
+    At its core, <strong>webpack</strong> is a static module bundler for modern
+    JavaScript applications. It processes your project and builds a dependency
+    graph which maps every module your project needs.
+  </p>
+  <ul style={{ marginBottom: 0 }}>
+    <li>
+      <strong>Entry:</strong> Indicates which module webpack should use to begin
+      building out its internal dependency graph.
+    </li>
+    <li>
+      <strong>Output:</strong> Tells webpack where to emit the bundles it
+      creates and how to name these files.
+    </li>
+    <li>
+      <strong>Loaders:</strong> Allows webpack to process other types of files
+      and convert them into valid modules (e.g., CSS, Images, TypeScript).
+    </li>
+    <li>
+      <strong>Plugins:</strong> Leverages a wide range of tasks like bundle
+      optimization, asset management, and environment variable injection.
+    </li>
+  </ul>
+</div>
+
 At its core, **webpack** is a _static module bundler_ for modern JavaScript applications. When webpack processes your application, it internally builds a [dependency graph](/concepts/dependency-graph/) from one or more _entry points_ and then combines every module your project needs into one or more _bundles_, which are static assets to serve your content from.
 
 T> Learn more about JavaScript modules and webpack modules [here](/concepts/modules).

diff --git a/src/content/configuration/index.mdx b/src/content/configuration/index.mdx
@@ -22,6 +22,43 @@ contributors:
   - chenxsan
 ---
 
+<div
+  style={{
+    padding: "1.5rem",
+    backgroundColor: "#f8f9fa",
+    borderLeft: "6px solid #1d71b8",
+    borderRadius: "8px",
+    margin: "2rem 0",
+    color: "#212529",
+    fontSize: "0.95rem",
+    lineHeight: "1.6",
+  }}
+>
+  <h3 style={{ marginTop: 0, color: "#1d71b8", fontSize: "1.25rem" }}>
+    Configuration Essentials
+  </h3>
+  <p>
+    Webpack's flexibility comes from its <strong>configuration-driven</strong>{" "}
+    nature. While it works out-of-the-box for simple projects, the configuration
+    file allows you to fine-tune how your assets are processed.
+  </p>
+  <ul style={{ marginBottom: 0 }}>
+    <li>
+      <strong>Structure:</strong> Typically defined in a{" "}
+      <code>webpack.config.js</code> file using CommonJS or ES Modules.
+    </li>
+    <li>
+      <strong>Environment:</strong> You can export configuration as an object, a
+      function, or multiple configurations for different environments (Dev vs.
+      Prod).
+    </li>
+    <li>
+      <strong>Extensibility:</strong> It acts as the central hub where you
+      register your Loaders and Plugins.
+    </li>
+  </ul>
+</div>
+
 Out of the box, webpack won't require you to use a configuration file. However, it will assume the entry point of your project is `src/index.js` and will output the result in `dist/main.js` minified and optimized for production.
 
 Usually, your projects will need to extend this functionality, for this you can create a `webpack.config.js` file in the root folder and webpack will automatically use it.

diff --git a/src/content/configuration/optimization.mdx b/src/content/configuration/optimization.mdx
@@ -26,7 +26,13 @@ Webpack runs optimizations for you depending on the chosen [`mode`](/configurati
 
 `boolean`
 
-Tells webpack to check the incompatible types of WebAssembly modules when they are imported/exported. By default `optimization.checkWasmTypes` is enabled in `production` [mode](/configuration/mode/) and disabled elsewise.
+Tells webpack to check the incompatible types of WebAssembly modules when they are imported/exported. The default value of `optimization.checkWasmTypes` depends on the [`mode`](/configuration/mode/):
+
+| Mode          | Default |
+| ------------- | ------- |
+| `development` | `false` |
+| `production`  | `true`  |
+| `none`        | `false` |
 
 **webpack.config.js**
 
@@ -106,7 +112,13 @@ export default {
 `boolean`
 
 Tells webpack to find segments of the module graph which can be safely concatenated into a single module. Depends on [`optimization.providedExports`](#optimizationprovidedexports) and [`optimization.usedExports`](#optimizationusedexports).
-By default `optimization.concatenateModules` is enabled in `production` [mode](/configuration/mode/) and disabled elsewise.
+The default value of `optimization.concatenateModules` depends on the [`mode`](/configuration/mode/):
+
+| Mode          | Default |
+| ------------- | ------- |
+| `development` | `false` |
+| `production`  | `true`  |
+| `none`        | `false` |
 
 **webpack.config.js**
 
@@ -150,7 +162,13 @@ Use `optimization.avoidEntryIife` to avoid wrapping the entry module in an IIFE
 
 Currently, `optimization.avoidEntryIife` can only optimize a single entry module along with other modules.
 
-By default, `optimization.avoidEntryIife` is enabled in `production` [mode](/configuration/mode/) and disabled otherwise.
+The default value of `optimization.avoidEntryIife` depends on the [`mode`](/configuration/mode/):
+
+| Mode          | Default |
+| ------------- | ------- |
+| `development` | `false` |
+| `production`  | `true`  |
+| `none`        | `false` |
 
 **webpack.config.js**
 
@@ -169,7 +187,13 @@ W> The `optimization.avoidEntryIife` option can negatively affect build performa
 
 `boolean`
 
-Tells webpack to determine and flag chunks which are subsets of other chunks in a way that subsets don’t have to be loaded when the bigger chunk has been already loaded. By default `optimization.flagIncludedChunks` is enabled in `production` [mode](/configuration/mode/) and disabled elsewise.
+Tells webpack to determine and flag chunks which are subsets of other chunks in a way that subsets don’t have to be loaded when the bigger chunk has been already loaded. The default value of `optimization.flagIncludedChunks` depends on the [`mode`](/configuration/mode/):
+
+| Mode          | Default |
+| ------------- | ------- |
+| `development` | `false` |
+| `production`  | `true`  |
+| `none`        | `false` |
 
 **webpack.config.js**
 
@@ -205,7 +229,13 @@ export default {
 
 `optimization.mangleExports` allows to control export mangling.
 
-By default `optimization.mangleExports: 'deterministic'` is enabled in `production` [mode](/configuration/mode/) and disabled elsewise.
+The default value of `optimization.mangleExports` depends on the [`mode`](/configuration/mode/):
+
+| Mode          | Default           |
+| ------------- | ----------------- |
+| `development` | `false`           |
+| `production`  | `'deterministic'` |
+| `none`        | `false`           |
 
 The following values are supported:
 
@@ -368,6 +398,7 @@ The default value of `optimization.moduleIds` depends on the [`mode`](/configura
 | `development` | `'named'`         |
 | `production`  | `'deterministic'` |
 | `none`        | `'natural'`       |
+| `none`        | `'natural'`       |
 
 The following string values are supported:
 
@@ -475,7 +506,13 @@ export default {
 
 `boolean`
 
-Adds an additional hash compilation pass after the assets have been processed to get the correct asset content hashes. If `realContentHash` is set to `false`, internal data is used to calculate the hash and it can change when assets are identical. By default `optimization.realContentHash` is enabled in production [mode](/configuration/mode/) and disabled otherwise.
+Adds an additional hash compilation pass after the assets have been processed to get the correct asset content hashes. If `realContentHash` is set to `false`, internal data is used to calculate the hash and it can change when assets are identical. The default value of `optimization.realContentHash` depends on the [`mode`](/configuration/mode/):
+
+| Mode          | Default |
+| ------------- | ------- |
+| `development` | `false` |
+| `production`  | `true`  |
+| `none`        | `false` |
 
 **webpack.config.js**
 

diff --git a/src/content/guides/index.mdx b/src/content/guides/index.mdx
@@ -7,6 +7,37 @@ contributors:
   - benschac
 ---
 
+<div
+  style={{
+    padding: "1.5rem",
+    backgroundColor: "#f1f8e9",
+    borderLeft: "6px solid #388e3c",
+    borderRadius: "8px",
+    margin: "2rem 0",
+    color: "#1b5e20",
+    fontSize: "0.95rem",
+  }}
+>
+  <h3 style={{ marginTop: 0, color: "#388e3c" }}>Guide Roadmap</h3>
+  <p>
+    Whether you're a beginner or a pro, these guides provide step-by-step
+    instructions for implementing specific features and solving common
+    development hurdles.
+  </p>
+  <ul style={{ marginBottom: 0 }}>
+    <li>
+      <strong>Getting Started:</strong> Basic setup for your first bundle.
+    </li>
+    <li>
+      <strong>Techniques:</strong> Advanced patterns like Code Splitting and
+      HMR.
+    </li>
+    <li>
+      <strong>Best Practices:</strong> Performance optimization and security.
+    </li>
+  </ul>
+</div>
+
 This section contains guides for understanding and mastering the wide variety of tools and features that webpack offers. The first is a guide that takes you through [getting started](/guides/getting-started/).
 
 The guides get more advanced as you go on. Most serve as a starting point, and once completed you should feel more comfortable diving into the actual [documentation](/configuration/).

diff --git a/src/content/loaders/index.mdx b/src/content/loaders/index.mdx
@@ -13,6 +13,25 @@ contributors:
   - chenxsan
 ---
 
+<div style={{ 
+  padding: '1.5rem', 
+  backgroundColor: '#f8f9fa', 
+  borderLeft: '6px solid #1d71b8', 
+  borderRadius: '8px', 
+  margin: '2rem 0',
+  color: '#212529',
+  fontSize: '0.95rem',
+  lineHeight: '1.6'
+}}>
+  <h3 style={{ marginTop: 0, color: '#1d71b8', fontSize: '1.25rem' }}>Understanding Loaders</h3>
+  <p>Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you <code>import</code> or "load" them.</p>
+  <ul style={{ marginBottom: 0 }}>
+    <li><strong>Transformation:</strong> Loaders can convert files from a different language (like TypeScript) to JavaScript.</li>
+    <li><strong>Assets:</strong> They allow you to include resources like images or CSS directly in your JavaScript dependency graph.</li>
+    <li><strong>Chaining:</strong> You can chain multiple loaders together (e.g., <code>sass-loader</code> -> <code>css-loader</code> -> <code>style-loader</code>).</li>
+  </ul>
+</div>
+
 Webpack enables use of [loaders](/concepts/loaders) to preprocess files. This allows you to bundle any static resource way beyond JavaScript. You can easily write your own loaders using Node.js.
 Loaders are separate packages that extend webpack's capabilities and are maintained within the broader ecosystem.
 Loaders are activated by using `loadername!` prefixes in `import .. from "mod";`/`require()` statements, or are automatically applied via regex from your webpack configuration – see [configuration](/concepts/loaders/#configuration).

diff --git a/src/content/migrate/index.mdx b/src/content/migrate/index.mdx
@@ -5,4 +5,40 @@ contributors:
   - EugeneHlushko
 ---
 
+<div
+  style={{
+    padding: "1.5rem",
+    backgroundColor: "#fce4ec",
+    borderLeft: "6px solid #c2185b",
+    borderRadius: "8px",
+    margin: "2rem 0",
+    color: "#880e4f",
+    fontSize: "0.95rem",
+    lineHeight: "1.6",
+  }}
+>
+  <h3 style={{ marginTop: 0, color: "#c2185b", fontSize: "1.25rem" }}>
+    Migration Strategy
+  </h3>
+  <p>
+    Moving between major versions of webpack requires careful planning. This
+    guide helps you navigate breaking changes and leverage performance
+    improvements in the latest releases.
+  </p>
+  <ul style={{ marginBottom: 0 }}>
+    <li>
+      <strong>Version 5 Focus:</strong> Improved build performance through
+      persistent caching and better tree shaking.
+    </li>
+    <li>
+      <strong>Breaking Changes:</strong> Learn how to handle deprecated
+      configuration options and updated internal APIs.
+    </li>
+    <li>
+      <strong>Validation:</strong> Use this guide as a checklist to ensure your
+      build remains stable during the transition.
+    </li>
+  </ul>
+</div>
+
 This section contains information about migrating from older versions of webpack to newer ones.
diff --git a/src/content/plugins/index.mdx b/src/content/plugins/index.mdx
@@ -14,6 +14,43 @@ contributors:
   - chenxsan
 ---
 
+<div
+  style={{
+    padding: "1.5rem",
+    backgroundColor: "#f8f9fa",
+    borderLeft: "6px solid #1d71b8",
+    borderRadius: "8px",
+    margin: "2rem 0",
+    color: "#212529",
+    fontSize: "0.95rem",
+    lineHeight: "1.6",
+  }}
+>
+  <h3 style={{ marginTop: 0, color: "#1d71b8", fontSize: "1.25rem" }}>
+    The Power of Plugins
+  </h3>
+  <p>
+    Plugins are the backbone of webpack. They serve the purpose of doing
+    anything else that a <strong>loader</strong> cannot do. Webpack itself is
+    built on the same plugin system that you use in your configuration.
+  </p>
+  <ul style={{ marginBottom: 0 }}>
+    <li>
+      <strong>Extensibility:</strong> Plugins can hook into the entire
+      compilation lifecycle to perform complex tasks.
+    </li>
+    <li>
+      <strong>Optimization:</strong> Use plugins for bundle minification, asset
+      management, and environment variable injection.
+    </li>
+    <li>
+      <strong>Built-in vs Third-party:</strong> Webpack provides many internal
+      plugins (like <code>DefinePlugin</code>), but the community offers
+      thousands more for specialized needs.
+    </li>
+  </ul>
+</div>
+
 Webpack has a rich plugin interface. Most of the features within webpack itself use this plugin interface. This makes webpack **flexible**.
 
 | Name                                                                            | Description                                                                            |