From 1f3f9a81f43b7dc4da35c6f2375de59ef88d412a Mon Sep 17 00:00:00 2001 From: Iblawal Date: Thu, 19 Mar 2026 09:43:16 -0500 Subject: [PATCH 1/6] docs: replace bullet points with defaults table for chunkIds and moduleIds --- src/content/configuration/optimization.mdx | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/src/content/configuration/optimization.mdx b/src/content/configuration/optimization.mdx index 328790605b14..d0361ab9026b 100644 --- a/src/content/configuration/optimization.mdx +++ b/src/content/configuration/optimization.mdx @@ -45,8 +45,13 @@ export default { Tells webpack which algorithm to use when choosing chunk ids. Setting `optimization.chunkIds` to `false` tells webpack that none of built-in algorithms should be used, as custom one can be provided via plugin. There are a couple of defaults for `optimization.chunkIds`: -- Also if the environment is development then `optimization.chunkIds` is set to `'named'`, while in production it is set to `'deterministic'` -- if none of the above, `optimization.chunkIds` will be defaulted to `'natural'` +The default value of `optimization.chunkIds` depends on the [`mode`](/configuration/mode/): + +| Mode | Default | +| ------------- | ----------------- | +| `development` | `'named'` | +| `production` | `'deterministic'` | +| `none` | `'natural'` | The following string values are supported: @@ -345,6 +350,14 @@ Basically, `'...'` is [a shortcut to access the default configuration value](htt Tells webpack which algorithm to use when choosing module ids. Setting `optimization.moduleIds` to `false` tells webpack that none of built-in algorithms should be used, as custom one can be provided via plugin. +The default value of `optimization.moduleIds` depends on the [`mode`](/configuration/mode/): + +| Mode | Default | +| ------------- | ----------------- | +| `development` | `'named'` | +| `production` | `'deterministic'` | +| `none` | `'natural'` | + The following string values are supported: | Option | Description | From 1d1097c1d96acd1b07ea9d7f071d21885928c70d Mon Sep 17 00:00:00 2001 From: Ibrahim Lawal Date: Fri, 10 Apr 2026 00:18:29 -0700 Subject: [PATCH 2/6] docs: add mode defaults tables for remaining optimization options --- src/content/configuration/optimization.mdx | 52 ++++++++++++++++++---- 1 file changed, 44 insertions(+), 8 deletions(-) diff --git a/src/content/configuration/optimization.mdx b/src/content/configuration/optimization.mdx index d0361ab9026b..426de08d11df 100644 --- a/src/content/configuration/optimization.mdx +++ b/src/content/configuration/optimization.mdx @@ -9,7 +9,7 @@ contributors: - madhavarshney - dhurlburtusa - jamesgeorge007 - - anikethsaha + - anikethsaha - snitin315 - pixel-ray - chenxsan @@ -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** @@ -97,7 +103,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** @@ -139,7 +151,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** @@ -158,7 +176,13 @@ W> The `⁠optimization.avoidEntryIife` option can negatively affect build perfo `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** @@ -194,7 +218,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: @@ -356,7 +386,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: @@ -464,7 +494,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** From 891bebf8aa57047ae23e362dd2090dcaf656c897 Mon Sep 17 00:00:00 2001 From: Ibrahim Lawal Date: Fri, 10 Apr 2026 01:17:10 -0700 Subject: [PATCH 3/6] fix: remove invisible character causing MDX build failure --- src/content/configuration/optimization.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/configuration/optimization.mdx b/src/content/configuration/optimization.mdx index 426de08d11df..4ce94a542b9a 100644 --- a/src/content/configuration/optimization.mdx +++ b/src/content/configuration/optimization.mdx @@ -9,7 +9,7 @@ contributors: - madhavarshney - dhurlburtusa - jamesgeorge007 - - anikethsaha + - anikethsaha - snitin315 - pixel-ray - chenxsan @@ -32,7 +32,7 @@ Tells webpack to check the incompatible types of WebAssembly modules when they a | ------------- | ----------------- | | `development` | `false` | | `production` | `true` | -| `none` | `false` |. +| `none` | `false` | **webpack.config.js** @@ -151,7 +151,7 @@ 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. - The default value of `optimization.avoidEntryIife` depends on the [`mode`](/configuration/mode/): +The default value of `optimization.avoidEntryIife` depends on the [`mode`](/configuration/mode/): | Mode | Default | | ------------- | ----------------- | @@ -170,7 +170,7 @@ export default { }; ``` -W> The `⁠optimization.avoidEntryIife` option can negatively affect build performance, if you prioritize build performance over these optimizations, consider disabling this option. +W> The `optimization.avoidEntryIife` option can negatively affect build performance, if you prioritize build performance over these optimizations, consider disabling this option. ## optimization.flagIncludedChunks From e17d8769c20cd97a977dd7d61e7b36ccfb47027b Mon Sep 17 00:00:00 2001 From: Ibrahim Lawal Date: Fri, 10 Apr 2026 03:22:47 -0700 Subject: [PATCH 4/6] fix: resolve CI lint failure --- package.json | 4 ++-- yarn.lock | 66 ++++++++-------------------------------------------- 2 files changed, 12 insertions(+), 58 deletions(-) diff --git a/package.json b/package.json index 51f986bf840f..e79a8084cb13 100644 --- 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/yarn.lock b/yarn.lock index 65e706923d7d..c64b4149a25b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3135,12 +3135,12 @@ "@typescript-eslint/types" "8.58.0" "@typescript-eslint/visitor-keys" "8.58.0" -"@typescript-eslint/tsconfig-utils@8.54.0", "@typescript-eslint/tsconfig-utils@^8.54.0": +"@typescript-eslint/tsconfig-utils@8.54.0": version "8.54.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.54.0.tgz#71dd7ba1674bd48b172fc4c85b2f734b0eae3dbc" integrity sha512-dRgOyT2hPk/JwxNMZDsIXDgyl9axdJI3ogZ2XWhBPsnZUv+hPesa5iuhdYt2gzwA9t8RE5ytOJ6xB0moV0Ujvw== -"@typescript-eslint/tsconfig-utils@8.58.0", "@typescript-eslint/tsconfig-utils@^8.58.0": +"@typescript-eslint/tsconfig-utils@8.58.0", "@typescript-eslint/tsconfig-utils@^8.54.0", "@typescript-eslint/tsconfig-utils@^8.58.0": version "8.58.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.58.0.tgz#c5a8edb21f31e0fdee565724e1b984171c559482" integrity sha512-doNSZEVJsWEu4htiVC+PR6NpM+pa+a4ClH9INRWOWCUzMst/VA9c4gXq92F8GUD1rwhNvRLkgjfYtFXegXQF7A== @@ -3156,12 +3156,12 @@ debug "^4.4.3" ts-api-utils "^2.5.0" -"@typescript-eslint/types@8.54.0", "@typescript-eslint/types@^8.54.0": +"@typescript-eslint/types@8.54.0": version "8.54.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.54.0.tgz#c12d41f67a2e15a8a96fbc5f2d07b17331130889" integrity sha512-PDUI9R1BVjqu7AUDsRBbKMtwmjWcn4J3le+5LpcFgWULN3LvHC5rkc9gCVxbrsrGmO1jfPybN5s6h4Jy+OnkAA== -"@typescript-eslint/types@8.58.0", "@typescript-eslint/types@^8.56.0", "@typescript-eslint/types@^8.58.0": +"@typescript-eslint/types@8.58.0", "@typescript-eslint/types@^8.54.0", "@typescript-eslint/types@^8.56.0", "@typescript-eslint/types@^8.58.0": version "8.58.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.58.0.tgz#e94ae7abdc1c6530e71183c1007b61fa93112a5a" integrity sha512-O9CjxypDT89fbHxRfETNoAnHj/i6IpRK0CvbVN3qibxlLdo5p5hcLmUuCCrHMpxiWSwKyI8mCP7qRNYuOJ0Uww== @@ -3196,7 +3196,7 @@ tinyglobby "^0.2.15" ts-api-utils "^2.5.0" -"@typescript-eslint/utils@8.58.0": +"@typescript-eslint/utils@8.58.0", "@typescript-eslint/utils@^8.0.0": version "8.58.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-8.58.0.tgz#21a74a7963b0d288b719a4121c7dd555adaab3c3" integrity sha512-RfeSqcFeHMHlAWzt4TBjWOAtoW9lnsAGiP3GbaX9uVgTYYrMbVnGONEfUCiSss+xMHFl+eHZiipmA8WkQ7FuNA== @@ -3206,16 +3206,6 @@ "@typescript-eslint/types" "8.58.0" "@typescript-eslint/typescript-estree" "8.58.0" -"@typescript-eslint/utils@^8.0.0": - version "8.54.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-8.54.0.tgz#c79a4bcbeebb4f571278c0183ed1cb601d84c6c8" - integrity sha512-9Cnda8GS57AQakvRyG0PTejJNlA2xhvyNtEVIMlDWOOeEyBkYWhGPnfrIAnqxLMTSTo6q8g12XVjjev5l1NvMA== - dependencies: - "@eslint-community/eslint-utils" "^4.9.1" - "@typescript-eslint/scope-manager" "8.54.0" - "@typescript-eslint/types" "8.54.0" - "@typescript-eslint/typescript-estree" "8.54.0" - "@typescript-eslint/visitor-keys@8.54.0": version "8.54.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-8.54.0.tgz#0e4b50124b210b8600b245dd66cbad52deb15590" @@ -4461,12 +4451,7 @@ chrome-trace-event@^1.0.2: dependencies: tslib "^1.9.0" -ci-info@^4.0.0, ci-info@^4.1.0, ci-info@^4.2.0: - version "4.3.1" - resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-4.3.1.tgz#355ad571920810b5623e11d40232f443f16f1daa" - integrity sha512-Wdy2Igu8OcBpI2pZePZ5oWjPC38tmDVx5WKUXKwlLYkA0ozo85sLsLvkBbBn/sZaSCMFOGZJ14fvW9t5/d7kdA== - -ci-info@^4.4.0: +ci-info@^4.0.0, ci-info@^4.1.0, ci-info@^4.2.0, ci-info@^4.4.0: version "4.4.0" resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-4.4.0.tgz#7d54eff9f54b45b62401c26032696eb59c8bd18c" integrity sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg== @@ -4811,14 +4796,7 @@ copy-webpack-plugin@^14.0.0: serialize-javascript "^7.0.3" tinyglobby "^0.2.12" -core-js-compat@^3.48.0: - version "3.48.0" - resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.48.0.tgz#7efbe1fc1cbad44008190462217cc5558adaeaa6" - integrity sha512-OM4cAF3D6VtH/WkLtWvyNC56EZVXsZdU3iqaMG2B4WvYrlqU831pc4UtG5yp0sE9z8Y02wVN7PjW5Zf9Gt0f1Q== - dependencies: - browserslist "^4.28.1" - -core-js-compat@^3.49.0: +core-js-compat@^3.48.0, core-js-compat@^3.49.0: version "3.49.0" resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.49.0.tgz#06145447d92f4aaf258a0c44f24b47afaeaffef6" integrity sha512-VQXt1jr9cBz03b331DFDCCP90b3fanciLkgiOoy8SBHy06gNf+vQ1A3WFLqG7I8TipYIKeYK9wxd0tUrvHcOZA== @@ -6202,12 +6180,7 @@ eslint-visitor-keys@^4.2.1: resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz#4cfea60fe7dd0ad8e816e1ed026c1d5251b512c1" integrity sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ== -eslint-visitor-keys@^5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-5.0.0.tgz#b9aa1a74aa48c44b3ae46c1597ce7171246a94a9" - integrity sha512-A0XeIi7CXU7nPlfHS9loMYEKxUaONu/hTEzHTGba9Huu94Cq1hPivf+DE5erJozZOky0LfvXAyrV/tcswpLI0Q== - -eslint-visitor-keys@^5.0.1: +eslint-visitor-keys@^5.0.0, eslint-visitor-keys@^5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz#9e3c9489697824d2d4ce3a8ad12628f91e9f59be" integrity sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA== @@ -9615,21 +9588,7 @@ mdast-util-to-hast@^13.0.0: unist-util-visit "^5.0.0" vfile "^6.0.0" -mdast-util-to-markdown@^2.0.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.0.tgz#9813f1d6e0cdaac7c244ec8c6dabfdb2102ea2b4" - integrity sha512-SR2VnIEdVNCJbP6y7kVTJgPLifdr8WEU440fQec7qHoHOUz/oJ2jmNRqdDQ3rbiStOXb2mCDGTuwsK5OPUgYlQ== - dependencies: - "@types/mdast" "^4.0.0" - "@types/unist" "^3.0.0" - longest-streak "^3.0.0" - mdast-util-phrasing "^4.0.0" - mdast-util-to-string "^4.0.0" - micromark-util-decode-string "^2.0.0" - unist-util-visit "^5.0.0" - zwitch "^2.0.0" - -mdast-util-to-markdown@^2.1.0: +mdast-util-to-markdown@^2.0.0, mdast-util-to-markdown@^2.1.0: version "2.1.2" resolved "https://registry.yarnpkg.com/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.2.tgz#f910ffe60897f04bb4b7e7ee434486f76288361b" integrity sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA== @@ -13565,12 +13524,7 @@ trough@^2.0.0: resolved "https://registry.yarnpkg.com/trough/-/trough-2.0.2.tgz#94a3aa9d5ce379fc561f6244905b3f36b7458d96" integrity sha512-FnHq5sTMxC0sk957wHDzRnemFnNBvt/gSY99HzK8F7UP5WAbvP70yX5bd7CjEQkN+TjdxwI7g7lJ6podqrG2/w== -ts-api-utils@^2.4.0: - version "2.4.0" - resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-2.4.0.tgz#2690579f96d2790253bdcf1ca35d569ad78f9ad8" - integrity sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA== - -ts-api-utils@^2.5.0: +ts-api-utils@^2.4.0, ts-api-utils@^2.5.0: version "2.5.0" resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-2.5.0.tgz#4acd4a155e22734990a5ed1fe9e97f113bcb37c1" integrity sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA== From a02661d600af167858b4d7aff7a1cd814cf4c3b5 Mon Sep 17 00:00:00 2001 From: Ibrahim Lawal Date: Sat, 25 Apr 2026 09:35:30 -0700 Subject: [PATCH 5/6] docs: add summary boxes --- src/content/api/index.mdx | 32 ++++++++++++++ src/content/concepts/index.mdx | 40 +++++++++++++++++ src/content/configuration/index.mdx | 37 ++++++++++++++++ src/content/configuration/optimization.mdx | 50 +++++++++++----------- src/content/guides/index.mdx | 31 ++++++++++++++ src/content/loaders/index.mdx | 19 ++++++++ src/content/migrate/index.mdx | 36 ++++++++++++++++ src/content/plugins/index.mdx | 37 ++++++++++++++++ 8 files changed, 257 insertions(+), 25 deletions(-) diff --git a/src/content/api/index.mdx b/src/content/api/index.mdx index dabb5fa9121b..cbd683cebced 100644 --- a/src/content/api/index.mdx +++ b/src/content/api/index.mdx @@ -5,6 +5,38 @@ contributors: - tbroadley --- +
+

API Reference Overview

+

+ 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. +

+
    +
  • + Compiler API: For external control over the webpack + execution. +
    • +
  • + Internal Hooks: Access the tapping system used by + plugins. +
    • +
  • + Stability: Use these interfaces to build custom tooling + on top of webpack. +
    • +
+
+ 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 index 6657460d2e15..6b3c86d13dac 100644 --- a/src/content/concepts/index.mdx +++ b/src/content/concepts/index.mdx @@ -23,6 +23,46 @@ contributors: - saishankar404 --- +
+

+ Core Concepts Overview +

+

+ At its core, webpack 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. +

+
    +
  • + Entry: Indicates which module webpack should use to begin + building out its internal dependency graph. +
    • +
  • + Output: Tells webpack where to emit the bundles it + creates and how to name these files. +
    • +
  • + Loaders: Allows webpack to process other types of files + and convert them into valid modules (e.g., CSS, Images, TypeScript). +
    • +
  • + Plugins: Leverages a wide range of tasks like bundle + optimization, asset management, and environment variable injection. +
    • +
+
+ 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 index 7236cf8c0f78..1e3062ab4271 100644 --- a/src/content/configuration/index.mdx +++ b/src/content/configuration/index.mdx @@ -22,6 +22,43 @@ contributors: - chenxsan --- +
+

+ Configuration Essentials +

+

+ Webpack's flexibility comes from its configuration-driven{" "} + nature. While it works out-of-the-box for simple projects, the configuration + file allows you to fine-tune how your assets are processed. +

+
    +
  • + Structure: Typically defined in a{" "} + webpack.config.js file using CommonJS or ES Modules. +
    • +
  • + Environment: You can export configuration as an object, a + function, or multiple configurations for different environments (Dev vs. + Prod). +
    • +
  • + Extensibility: It acts as the central hub where you + register your Loaders and Plugins. +
    • +
+
+ 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 index 8be4053498ea..ab2ea9a055e7 100644 --- a/src/content/configuration/optimization.mdx +++ b/src/content/configuration/optimization.mdx @@ -28,11 +28,11 @@ Webpack runs optimizations for you depending on the chosen [`mode`](/configurati 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 | -| ------------- | ----------------- | +| Mode | Default | +| ------------- | ------- | | `development` | `false` | -| `production` | `true` | -| `none` | `false` | +| `production` | `true` | +| `none` | `false` | **webpack.config.js** @@ -114,11 +114,11 @@ export default { 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). The default value of `optimization.concatenateModules` depends on the [`mode`](/configuration/mode/): -| Mode | Default | -| ------------- | ----------------- | +| Mode | Default | +| ------------- | ------- | | `development` | `false` | -| `production` | `true` | -| `none` | `false` | +| `production` | `true` | +| `none` | `false` | **webpack.config.js** @@ -164,11 +164,11 @@ Currently, `optimization.avoidEntryIife` can only optimize a single entry module The default value of `optimization.avoidEntryIife` depends on the [`mode`](/configuration/mode/): -| Mode | Default | -| ------------- | ----------------- | +| Mode | Default | +| ------------- | ------- | | `development` | `false` | -| `production` | `true` | -| `none` | `false` | +| `production` | `true` | +| `none` | `false` | **webpack.config.js** @@ -189,11 +189,11 @@ W> The `optimization.avoidEntryIife` option can negatively affect build performa 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 | -| ------------- | ----------------- | +| Mode | Default | +| ------------- | ------- | | `development` | `false` | -| `production` | `true` | -| `none` | `false` | +| `production` | `true` | +| `none` | `false` | **webpack.config.js** @@ -231,11 +231,11 @@ export default { The default value of `optimization.mangleExports` depends on the [`mode`](/configuration/mode/): -| Mode | Default | +| Mode | Default | | ------------- | ----------------- | -| `development` | `false` | -| `production` | `'deterministic'` | -| `none` | `false` | +| `development` | `false` | +| `production` | `'deterministic'` | +| `none` | `false` | The following values are supported: @@ -397,7 +397,7 @@ The default value of `optimization.moduleIds` depends on the [`mode`](/configura | ------------- | ----------------- | | `development` | `'named'` | | `production` | `'deterministic'` | -| `none` | `'natural'` | +| `none` | `'natural'` | | `none` | `'natural'` | The following string values are supported: @@ -508,11 +508,11 @@ export default { 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 | -| ------------- | ----------------- | +| Mode | Default | +| ------------- | ------- | | `development` | `false` | -| `production` | `true` | -| `none` | `false` | +| `production` | `true` | +| `none` | `false` | **webpack.config.js** diff --git a/src/content/guides/index.mdx b/src/content/guides/index.mdx index 58223642df9f..d4eee177239c 100644 --- a/src/content/guides/index.mdx +++ b/src/content/guides/index.mdx @@ -7,6 +7,37 @@ contributors: - benschac --- +
+

Guide Roadmap

+

+ Whether you're a beginner or a pro, these guides provide step-by-step + instructions for implementing specific features and solving common + development hurdles. +

+
    +
  • + Getting Started: Basic setup for your first bundle. +
    • +
  • + Techniques: Advanced patterns like Code Splitting and + HMR. +
    • +
  • + Best Practices: Performance optimization and security. +
    • +
+
+ 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 index 765dd1bc9b85..6cd25490c242 100644 --- a/src/content/loaders/index.mdx +++ b/src/content/loaders/index.mdx @@ -13,6 +13,25 @@ contributors: - chenxsan --- +
+

Understanding Loaders

+

Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you import or "load" them.

+
    +
  • Transformation: Loaders can convert files from a different language (like TypeScript) to JavaScript.
    • +
  • Assets: They allow you to include resources like images or CSS directly in your JavaScript dependency graph.
    • +
  • Chaining: You can chain multiple loaders together (e.g., sass-loader -> css-loader -> style-loader).
    • +
+
+ 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 index c899750175d1..f9a38c07e6c5 100644 --- a/src/content/migrate/index.mdx +++ b/src/content/migrate/index.mdx @@ -5,4 +5,40 @@ contributors: - EugeneHlushko --- +
+

+ Migration Strategy +

+

+ Moving between major versions of webpack requires careful planning. This + guide helps you navigate breaking changes and leverage performance + improvements in the latest releases. +

+
    +
  • + Version 5 Focus: Improved build performance through + persistent caching and better tree shaking. +
    • +
  • + Breaking Changes: Learn how to handle deprecated + configuration options and updated internal APIs. +
    • +
  • + Validation: Use this guide as a checklist to ensure your + build remains stable during the transition. +
    • +
+
+ 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 index 197106c4aabf..f11b8b7721d9 100644 --- a/src/content/plugins/index.mdx +++ b/src/content/plugins/index.mdx @@ -14,6 +14,43 @@ contributors: - chenxsan --- +
+

+ The Power of Plugins +

+

+ Plugins are the backbone of webpack. They serve the purpose of doing + anything else that a loader cannot do. Webpack itself is + built on the same plugin system that you use in your configuration. +

+
    +
  • + Extensibility: Plugins can hook into the entire + compilation lifecycle to perform complex tasks. +
    • +
  • + Optimization: Use plugins for bundle minification, asset + management, and environment variable injection. +
    • +
  • + Built-in vs Third-party: Webpack provides many internal + plugins (like DefinePlugin), but the community offers + thousands more for specialized needs. +
    • +
+
+ Webpack has a rich plugin interface. Most of the features within webpack itself use this plugin interface. This makes webpack **flexible**. | Name | Description | From 22e69bb395890bad9937833317de0ef60a98df82 Mon Sep 17 00:00:00 2001 From: Ibrahim Lawal Date: Mon, 27 Apr 2026 03:08:51 -0700 Subject: [PATCH 6/6] style(docs): standardize summary boxes using tailwind helpers --- src/content/api/index.mdx | 26 ++++++++--------------- src/content/concepts/index.mdx | 30 ++++++++------------------ src/content/configuration/index.mdx | 32 +++++++--------------------- src/content/guides/index.mdx | 26 ++++++++--------------- src/content/loaders/index.mdx | 33 +++++++++++++++-------------- src/content/migrate/index.mdx | 25 ++++++---------------- src/content/plugins/index.mdx | 27 +++++++---------------- 7 files changed, 67 insertions(+), 132 deletions(-) diff --git a/src/content/api/index.mdx b/src/content/api/index.mdx index cbd683cebced..7a46336360f4 100644 --- a/src/content/api/index.mdx +++ b/src/content/api/index.mdx @@ -5,33 +5,25 @@ contributors: - tbroadley --- -
-

API Reference Overview

-

+

+

+ API Reference Overview +

+

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.

-
    +
    • - Compiler API: For external control over the webpack + Compiler API: For external control over the webpack execution.
    • - Internal Hooks: Access the tapping system used by + Internal Hooks: Access the tapping system used by plugins.
    • - Stability: Use these interfaces to build custom tooling + Stability: Use these interfaces to build custom tooling on top of webpack.
    diff --git a/src/content/concepts/index.mdx b/src/content/concepts/index.mdx index 6b3c86d13dac..8d9bdeeb4d76 100644 --- a/src/content/concepts/index.mdx +++ b/src/content/concepts/index.mdx @@ -23,46 +23,34 @@ contributors: - saishankar404 --- -
    -

    +
    +

    Core Concepts Overview

    -

    - At its core, webpack is a static module bundler for modern +

    + At its core, webpack 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.

    -
      +
      • - Entry: Indicates which module webpack should use to begin + Entry: Indicates which module webpack should use to begin building out its internal dependency graph.
      • - Output: Tells webpack where to emit the bundles it + Output: Tells webpack where to emit the bundles it creates and how to name these files.
      • - Loaders: Allows webpack to process other types of files + Loaders: Allows webpack to process other types of files and convert them into valid modules (e.g., CSS, Images, TypeScript).
      • - Plugins: Leverages a wide range of tasks like bundle + Plugins: Leverages a wide range of tasks like bundle optimization, asset management, and environment variable injection.
    - 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 index 1e3062ab4271..684e4cb15a2c 100644 --- a/src/content/configuration/index.mdx +++ b/src/content/configuration/index.mdx @@ -22,39 +22,23 @@ contributors: - chenxsan --- -
    -

    +
    +

    Configuration Essentials

    -

    - Webpack's flexibility comes from its configuration-driven{" "} - nature. While it works out-of-the-box for simple projects, the configuration +

    + Webpack's flexibility comes from its configuration-driven nature. While it works out-of-the-box for simple projects, the configuration file allows you to fine-tune how your assets are processed.

    -
      +
      • - Structure: Typically defined in a{" "} - webpack.config.js file using CommonJS or ES Modules. + Structure: Typically defined in a webpack.config.js file using CommonJS or ES Modules.
      • - Environment: You can export configuration as an object, a - function, or multiple configurations for different environments (Dev vs. - Prod). + Environment: You can export configuration as an object, a function, or multiple configurations for different environments (Dev vs. Prod).
      • - Extensibility: It acts as the central hub where you - register your Loaders and Plugins. + Extensibility: It acts as the central hub where you register your Loaders and Plugins.
    diff --git a/src/content/guides/index.mdx b/src/content/guides/index.mdx index d4eee177239c..95c4a71a5a33 100644 --- a/src/content/guides/index.mdx +++ b/src/content/guides/index.mdx @@ -7,33 +7,25 @@ contributors: - benschac --- -
    -

    Guide Roadmap

    -

    +

    +

    + Guide Roadmap +

    +

    Whether you're a beginner or a pro, these guides provide step-by-step instructions for implementing specific features and solving common development hurdles.

    -
      +
      • - Getting Started: Basic setup for your first bundle. + Getting Started: Basic setup for your first bundle.
      • - Techniques: Advanced patterns like Code Splitting and + Techniques: Advanced patterns like Code Splitting and HMR.
      • - Best Practices: Performance optimization and security. + Best Practices: Performance optimization and security.
    diff --git a/src/content/loaders/index.mdx b/src/content/loaders/index.mdx index 6cd25490c242..ea6e0a0f4aa8 100644 --- a/src/content/loaders/index.mdx +++ b/src/content/loaders/index.mdx @@ -13,22 +13,23 @@ contributors: - chenxsan --- -
    -

    Understanding Loaders

    -

    Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you import or "load" them.

    -
      -
    • Transformation: Loaders can convert files from a different language (like TypeScript) to JavaScript.
      • -
    • Assets: They allow you to include resources like images or CSS directly in your JavaScript dependency graph.
      • -
    • Chaining: You can chain multiple loaders together (e.g., sass-loader -> css-loader -> style-loader).
      • +
      +

      + Understanding Loaders +

      +

      + Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you import or "load" them. +

      +
        +
      • + Transformation: Loaders can convert files from a different language (like TypeScript) to JavaScript. +
        • +
      • + Assets: They allow you to include resources like images or CSS directly in your JavaScript dependency graph. +
        • +
      • + Chaining: You can chain multiple loaders together (e.g., sass-loader → css-loader → style-loader). +
      diff --git a/src/content/migrate/index.mdx b/src/content/migrate/index.mdx index f9a38c07e6c5..b79ea8db7be0 100644 --- a/src/content/migrate/index.mdx +++ b/src/content/migrate/index.mdx @@ -5,37 +5,26 @@ contributors: - EugeneHlushko --- -
      -

      +
      +

      Migration Strategy

      -

      +

      Moving between major versions of webpack requires careful planning. This guide helps you navigate breaking changes and leverage performance improvements in the latest releases.

      -
        +
        • - Version 5 Focus: Improved build performance through + Version 5 Focus: Improved build performance through persistent caching and better tree shaking.
        • - Breaking Changes: Learn how to handle deprecated + Breaking Changes: Learn how to handle deprecated configuration options and updated internal APIs.
        • - Validation: Use this guide as a checklist to ensure your + Validation: Use this guide as a checklist to ensure your build remains stable during the transition.
        diff --git a/src/content/plugins/index.mdx b/src/content/plugins/index.mdx index f11b8b7721d9..6a57a0f8cf2d 100644 --- a/src/content/plugins/index.mdx +++ b/src/content/plugins/index.mdx @@ -14,37 +14,26 @@ contributors: - chenxsan --- -
        -

        +
        +

        The Power of Plugins

        -

        +

        Plugins are the backbone of webpack. They serve the purpose of doing - anything else that a loader cannot do. Webpack itself is + anything else that a loader cannot do. Webpack itself is built on the same plugin system that you use in your configuration.

        -
          +
          • - Extensibility: Plugins can hook into the entire + Extensibility: Plugins can hook into the entire compilation lifecycle to perform complex tasks.
          • - Optimization: Use plugins for bundle minification, asset + Optimization: Use plugins for bundle minification, asset management, and environment variable injection.
          • - Built-in vs Third-party: Webpack provides many internal + Built-in vs Third-party: Webpack provides many internal plugins (like DefinePlugin), but the community offers thousands more for specialized needs.