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/src/content/api/index.mdx b/src/content/api/index.mdx index dabb5fa9121b..7a46336360f4 100644 --- a/src/content/api/index.mdx +++ b/src/content/api/index.mdx @@ -5,6 +5,30 @@ 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. +

+ +
+ 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..8d9bdeeb4d76 100644 --- a/src/content/concepts/index.mdx +++ b/src/content/concepts/index.mdx @@ -23,6 +23,34 @@ 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. +

+ +
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..684e4cb15a2c 100644 --- a/src/content/configuration/index.mdx +++ b/src/content/configuration/index.mdx @@ -22,6 +22,27 @@ 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. +

+ +
+ 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 6373d02c4b91..ab2ea9a055e7 100644 --- 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 index 58223642df9f..95c4a71a5a33 100644 --- a/src/content/guides/index.mdx +++ b/src/content/guides/index.mdx @@ -7,6 +7,29 @@ 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. +

+ +
+ 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..ea6e0a0f4aa8 100644 --- a/src/content/loaders/index.mdx +++ b/src/content/loaders/index.mdx @@ -13,6 +13,26 @@ 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. +

+ +
+ 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..b79ea8db7be0 100644 --- a/src/content/migrate/index.mdx +++ b/src/content/migrate/index.mdx @@ -5,4 +5,29 @@ 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. +

+ +
+ 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..6a57a0f8cf2d 100644 --- a/src/content/plugins/index.mdx +++ b/src/content/plugins/index.mdx @@ -14,6 +14,32 @@ 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. +

+ +
+ Webpack has a rich plugin interface. Most of the features within webpack itself use this plugin interface. This makes webpack **flexible**. | Name | Description | 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==