Site updated at 2024-01-21 08:53:06 UTC

w3cub · Jan 21, 2024 · 81e4196 · 81e4196
1 parent 4a2ce9f
commit 81e4196
Show file tree

Hide file tree

Showing 142 changed files with 1,617 additions and 406 deletions.
diff --git a/assets/.sprockets-manifest-a08289286f5cbc3cdb81ede4198569bd.json b/assets/.sprockets-manifest-a08289286f5cbc3cdb81ede4198569bd.json
diff --git a/webpack~5/api/cli.html b/webpack~5/api/cli.html
@@ -15,7 +15,7 @@
 
   <link rel="canonical" href="https://docs.w3cub.com/webpack~5/api/cli.html">
   <link href="/favicon.png" rel="icon">
-  <link rel="stylesheet" type="text/css" href="/assets/application-9c7b0d969c0ce639a6c01c2badcdd81667c7c66206aa3d0fccc5cb0585fb1b912dab72ea882101d18010680927514b4b77b107282db8f756fbf63301fe9c88b0.css">
+  <link rel="stylesheet" type="text/css" href="/assets/application-c8f743fc70bb84079c3cf4b71f5f99835529659c30689b2fd6193651a680f383ef1d96896f8966c7ca8a0160ffd557685bb8ad12820ec6002d60143812238086.css">
   <script type="text/javascript" src="/assets/application-79c555f6b25481fffac2cac30a7f3e54e608ca09e9e8e42bb1790095ba6d0fcace47d6bc624ddce952c70370892f2d46864f89e6943d4f7f7ff16c8a3231a91a.js"></script>
   <script src="/json/webpack~5.js"></script>
 
@@ -383,6 +383,11 @@ <h2>
 <td data-th="Type"><span>boolean</span></td>
 <td data-th="Description"><span>It invokes <code>webpack-bundle-analyzer</code> plugin to get bundle information</span></td>
 </tr>
+<tr>
+<td data-th="Flag / Alias"><span><a href="#extends"><code>--extends, -e</code></a></span></td>
+<td data-th="Type"><span>string[]</span></td>
+<td data-th="Description"><span>Extend an existing configuration</span></td>
+</tr>
 </tbody>
 </table>
 <h3>
@@ -577,6 +582,11 @@ <h3>
 <p>You can merge two or more different webpack configurations with the help of <code>--merge</code>:</p>
 <pre data-language="bash">npx webpack --config ./first.js --config ./second.js --merge</pre>
 <h3>
+extends
+</h3>
+<span class="badge">webpack-cli v5.1.0+</span><p>You can extend existing webpack configurations with the help of <code>--extends</code>:</p>
+<pre data-language="bash">npx webpack --extends ./base.webpack.config.js</pre>
+<h3>
 json
 </h3>
 <p><strong>Print result of webpack as JSON</strong></p>
@@ -654,15 +664,14 @@ <h3>
 <h3>
 node-env
 </h3>
-<p>For <code>webpack-cli v4</code>.</p>
-<p>You can use <code>--node-env</code> option to set <code>process.env.NODE_ENV</code>:</p>
+<p>You can use <code>--node-env</code> option to set <code>process.env.NODE_ENV</code>, which is available to both user code and webpack configuration:</p>
 <pre data-language="bash">npx webpack --node-env production   # process.env.NODE_ENV = 'production'</pre>
 <aside class="tip"><h6 class="tip__prefix">tip</h6>
 <p>The <code>mode</code> option would respect the <code>--node-env</code> option if you don't set it explicitly, i.e. <code>--node-env production</code> would set both <code>process.env.NODE_ENV</code> and <code>mode</code> to <code>'production'</code></p></aside><h3>
 define-process-env-node-env
 </h3>
 <p>For <code>webpack-cli v5+</code>.</p>
-<p>You can use <code>--define-process-env-node-env</code> option to set <code>process.env.NODE_ENV</code>:</p>
+<p>An alias for <a href="cli#node-env"><code>--node-env</code></a> to set <code>process.env.NODE_ENV</code>:</p>
 <pre data-language="bash">npx webpack --define-process-env-node-env production   # process.env.NODE_ENV = 'production'</pre>
 <aside class="tip"><h6 class="tip__prefix">tip</h6>
 <p>The <code>mode</code> option would respect the <code>--define-process-env-node-env</code> option if you don't set it explicitly, i.e. <code>--define-process-env-node-env production</code> would set both <code>process.env.NODE_ENV</code> and <code>mode</code> to <code>'production'</code></p></aside><h2>

diff --git a/webpack~5/api/compilation-hooks.html b/webpack~5/api/compilation-hooks.html
@@ -15,7 +15,7 @@
 
   <link rel="canonical" href="https://docs.w3cub.com/webpack~5/api/compilation-hooks.html">
   <link href="/favicon.png" rel="icon">
-  <link rel="stylesheet" type="text/css" href="/assets/application-9c7b0d969c0ce639a6c01c2badcdd81667c7c66206aa3d0fccc5cb0585fb1b912dab72ea882101d18010680927514b4b77b107282db8f756fbf63301fe9c88b0.css">
+  <link rel="stylesheet" type="text/css" href="/assets/application-c8f743fc70bb84079c3cf4b71f5f99835529659c30689b2fd6193651a680f383ef1d96896f8966c7ca8a0160ffd557685bb8ad12820ec6002d60143812238086.css">
   <script type="text/javascript" src="/assets/application-79c555f6b25481fffac2cac30a7f3e54e608ca09e9e8e42bb1790095ba6d0fcace47d6bc624ddce952c70370892f2d46864f89e6943d4f7f7ff16c8a3231a91a.js"></script>
   <script src="/json/webpack~5.js"></script>
 
@@ -164,6 +164,14 @@ <h3>
 <ul><li>Callback Parameters: <code>modules</code>
 </li></ul>
 <h3>
+afterChunks
+</h3>
+<p><code>SyncHook</code></p>
+<span class="badge">5.83.0+</span><p>The <code>afterChunks</code> hook is invoked following the creation of the chunks and module graph, and prior to their optimization. This hook provides an opportunity to examine, analyze, and modify the chunk graph if necessary.</p>
+<p>Here's <a href="https://github.com/webpack/webpack/blob/10be3f9e3fb34078af8c5841a77025a6722f11bf/lib/wasm-sync/WebAssemblyModulesPlugin.js#L114-L137">an example</a> of how to utilize the <code>compilation.hooks.afterChunks</code> hook.</p>
+<ul><li>Callback Parameters: <code>chunks</code>
+</li></ul>
+<h3>
 optimize
 </h3>
 <p><code>SyncHook</code></p>
@@ -374,7 +382,8 @@ <h3>
 additionalAssets
 </h3>
 <p><code>AsyncSeriesHook</code></p>
-<p>Create additional assets for the compilation. This hook can be used to download an image, for example:</p>
+<aside class="warning"><h6 class="warning__prefix">warning</h6>
+<p><code>additionalAssets</code> is deprecated (use the <a href="#processassets">Compilation.hook.processAssets</a> hook instead and use one of the Compilation.PROCESS_ASSETS_STAGE_* as a stage option)</p></aside><p>Create additional assets for the compilation. This hook can be used to download an image, for example:</p>
 <pre data-language="js">compilation.hooks.additionalAssets.tapAsync('MyPlugin', (callback) =&gt; {
   download('https://img.shields.io/npm/v/webpack.svg', function (resp) {
     if (resp.status === 200) {
@@ -434,14 +443,16 @@ <h3>
 optimizeAssets
 </h3>
 <p><code>AsyncSeriesHook</code></p>
-<p>Optimize all assets stored in <code>compilation.assets</code>.</p>
+<aside class="warning"><h6 class="warning__prefix">warning</h6>
+<p><code>optimizeAssets</code> is deprecated (use the <a href="#processassets">Compilation.hook.processAssets</a> hook instead)</p></aside><p>Optimize all assets stored in <code>compilation.assets</code>.</p>
 <ul><li>Callback Parameters: <code>assets</code>
 </li></ul>
 <h3>
 afterOptimizeAssets
 </h3>
 <p><code>SyncHook</code></p>
-<p>The assets have been optimized.</p>
+<aside class="warning"><h6 class="warning__prefix">warning</h6>
+<p><code>afterOptimizeAssets</code> is deprecated (use the <a href="#afterprocessassets">Compilation.hook.afterProcessAssets</a> hook instead)</p></aside><p>The assets have been optimized.</p>
 <ul><li>Callback Parameters: <code>assets</code>
 </li></ul>
 <h3>

diff --git a/webpack~5/api/compilation-object.html b/webpack~5/api/compilation-object.html
@@ -15,7 +15,7 @@
 
   <link rel="canonical" href="https://docs.w3cub.com/webpack~5/api/compilation-object.html">
   <link href="/favicon.png" rel="icon">
-  <link rel="stylesheet" type="text/css" href="/assets/application-9c7b0d969c0ce639a6c01c2badcdd81667c7c66206aa3d0fccc5cb0585fb1b912dab72ea882101d18010680927514b4b77b107282db8f756fbf63301fe9c88b0.css">
+  <link rel="stylesheet" type="text/css" href="/assets/application-c8f743fc70bb84079c3cf4b71f5f99835529659c30689b2fd6193651a680f383ef1d96896f8966c7ca8a0160ffd557685bb8ad12820ec6002d60143812238086.css">
   <script type="text/javascript" src="/assets/application-79c555f6b25481fffac2cac30a7f3e54e608ca09e9e8e42bb1790095ba6d0fcace47d6bc624ddce952c70370892f2d46864f89e6943d4f7f7ff16c8a3231a91a.js"></script>
   <script src="/json/webpack~5.js"></script>
 
@@ -99,14 +99,14 @@ <h3>
 <h3>
 addModule
 </h3>
-<p><code>function (module, cacheGroup)</code></p>
+<p><code>function (module, callback)</code></p>
 <p>Adds a module to the current compilation.</p>
 <p>Parameters:</p>
 <ul>
 <li>
 <code>module</code> - module to be added</li>
 <li>
-<code>cacheGroup</code> - <code>cacheGroup</code> of the module</li>
+<code>callback</code> - a callback after the module has been added</li>
 </ul>
 <h3>
 getModule

diff --git a/webpack~5/api/compiler-hooks.html b/webpack~5/api/compiler-hooks.html
@@ -15,7 +15,7 @@
 
   <link rel="canonical" href="https://docs.w3cub.com/webpack~5/api/compiler-hooks.html">
   <link href="/favicon.png" rel="icon">
-  <link rel="stylesheet" type="text/css" href="/assets/application-9c7b0d969c0ce639a6c01c2badcdd81667c7c66206aa3d0fccc5cb0585fb1b912dab72ea882101d18010680927514b4b77b107282db8f756fbf63301fe9c88b0.css">
+  <link rel="stylesheet" type="text/css" href="/assets/application-c8f743fc70bb84079c3cf4b71f5f99835529659c30689b2fd6193651a680f383ef1d96896f8966c7ca8a0160ffd557685bb8ad12820ec6002d60143812238086.css">
   <script type="text/javascript" src="/assets/application-79c555f6b25481fffac2cac30a7f3e54e608ca09e9e8e42bb1790095ba6d0fcace47d6bc624ddce952c70370892f2d46864f89e6943d4f7f7ff16c8a3231a91a.js"></script>
   <script src="/json/webpack~5.js"></script>
 

diff --git a/webpack~5/api/contextmodulefactory-hooks.html b/webpack~5/api/contextmodulefactory-hooks.html
@@ -15,7 +15,7 @@
 
   <link rel="canonical" href="https://docs.w3cub.com/webpack~5/api/contextmodulefactory-hooks.html">
   <link href="/favicon.png" rel="icon">
-  <link rel="stylesheet" type="text/css" href="/assets/application-9c7b0d969c0ce639a6c01c2badcdd81667c7c66206aa3d0fccc5cb0585fb1b912dab72ea882101d18010680927514b4b77b107282db8f756fbf63301fe9c88b0.css">
+  <link rel="stylesheet" type="text/css" href="/assets/application-c8f743fc70bb84079c3cf4b71f5f99835529659c30689b2fd6193651a680f383ef1d96896f8966c7ca8a0160ffd557685bb8ad12820ec6002d60143812238086.css">
   <script type="text/javascript" src="/assets/application-79c555f6b25481fffac2cac30a7f3e54e608ca09e9e8e42bb1790095ba6d0fcace47d6bc624ddce952c70370892f2d46864f89e6943d4f7f7ff16c8a3231a91a.js"></script>
   <script src="/json/webpack~5.js"></script>
 

diff --git a/webpack~5/api/hot-module-replacement.html b/webpack~5/api/hot-module-replacement.html
@@ -15,7 +15,7 @@
 
   <link rel="canonical" href="https://docs.w3cub.com/webpack~5/api/hot-module-replacement.html">
   <link href="/favicon.png" rel="icon">
-  <link rel="stylesheet" type="text/css" href="/assets/application-9c7b0d969c0ce639a6c01c2badcdd81667c7c66206aa3d0fccc5cb0585fb1b912dab72ea882101d18010680927514b4b77b107282db8f756fbf63301fe9c88b0.css">
+  <link rel="stylesheet" type="text/css" href="/assets/application-c8f743fc70bb84079c3cf4b71f5f99835529659c30689b2fd6193651a680f383ef1d96896f8966c7ca8a0160ffd557685bb8ad12820ec6002d60143812238086.css">
   <script type="text/javascript" src="/assets/application-79c555f6b25481fffac2cac30a7f3e54e608ca09e9e8e42bb1790095ba6d0fcace47d6bc624ddce952c70370892f2d46864f89e6943d4f7f7ff16c8a3231a91a.js"></script>
   <script src="/json/webpack~5.js"></script>
 

diff --git a/webpack~5/api/index.html b/webpack~5/api/index.html
@@ -15,7 +15,7 @@
 
   <link rel="canonical" href="https://docs.w3cub.com/webpack~5/api/">
   <link href="/favicon.png" rel="icon">
-  <link rel="stylesheet" type="text/css" href="/assets/application-9c7b0d969c0ce639a6c01c2badcdd81667c7c66206aa3d0fccc5cb0585fb1b912dab72ea882101d18010680927514b4b77b107282db8f756fbf63301fe9c88b0.css">
+  <link rel="stylesheet" type="text/css" href="/assets/application-c8f743fc70bb84079c3cf4b71f5f99835529659c30689b2fd6193651a680f383ef1d96896f8966c7ca8a0160ffd557685bb8ad12820ec6002d60143812238086.css">
   <script type="text/javascript" src="/assets/application-79c555f6b25481fffac2cac30a7f3e54e608ca09e9e8e42bb1790095ba6d0fcace47d6bc624ddce952c70370892f2d46864f89e6943d4f7f7ff16c8a3231a91a.js"></script>
   <script src="/json/webpack~5.js"></script>
 

diff --git a/webpack~5/api/loaders.html b/webpack~5/api/loaders.html
@@ -15,7 +15,7 @@
 
   <link rel="canonical" href="https://docs.w3cub.com/webpack~5/api/loaders.html">
   <link href="/favicon.png" rel="icon">
-  <link rel="stylesheet" type="text/css" href="/assets/application-9c7b0d969c0ce639a6c01c2badcdd81667c7c66206aa3d0fccc5cb0585fb1b912dab72ea882101d18010680927514b4b77b107282db8f756fbf63301fe9c88b0.css">
+  <link rel="stylesheet" type="text/css" href="/assets/application-c8f743fc70bb84079c3cf4b71f5f99835529659c30689b2fd6193651a680f383ef1d96896f8966c7ca8a0160ffd557685bb8ad12820ec6002d60143812238086.css">
   <script type="text/javascript" src="/assets/application-79c555f6b25481fffac2cac30a7f3e54e608ca09e9e8e42bb1790095ba6d0fcace47d6bc624ddce952c70370892f2d46864f89e6943d4f7f7ff16c8a3231a91a.js"></script>
   <script src="/json/webpack~5.js"></script>
 
@@ -298,6 +298,35 @@ <h3>
  @ ./src/index.js 1:0-25</pre>
 <aside class="tip"><h6 class="tip__prefix">tip</h6>
 <p>Note that the warnings will not be displayed if <code>stats.warnings</code> is set to <code>false</code>, or some other omit setting is used to <code>stats</code> such as <code>none</code> or <code>errors-only</code>. See the <a href="../configuration/stats#stats-presets">stats presets configuration</a>.</p></aside><h3>
+this.environment
+</h3>
+<p>Check what kind of ES-features may be used in the generated runtime-code.</p>
+<p>E.g.,</p>
+<pre data-language="json">{
+  // The environment supports arrow functions ('() =&gt; { ... }').
+  "arrowFunction": true,
+  // The environment supports BigInt as literal (123n).
+  "bigIntLiteral": false,
+  // The environment supports const and let for variable declarations.
+  "const": true,
+  // The environment supports destructuring ('{ a, b } = obj').
+  "destructuring": true,
+  // The environment supports an async import() function to import EcmaScript modules.
+  "dynamicImport": false,
+  // The environment supports an async import() when creating a worker, only for web targets at the moment.
+  "dynamicImportInWorker": false,
+  // The environment supports 'for of' iteration ('for (const x of array) { ... }').
+  "forOf": true,
+  // The environment supports 'globalThis'.
+  "globalThis": true,
+  // The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...').
+  "module": false,
+  // The environment supports optional chaining ('obj?.a' or 'obj?.()').
+  "optionalChaining": true,
+  // The environment supports template literals.
+  "templateLiteral": true
+}</pre>
+<h3>
 this.fs
 </h3>
 <p>Access to the <code>compilation</code>'s <code>inputFileSystem</code> property.</p>
@@ -389,7 +418,7 @@ <h3>
 this.loadModule
 </h3>
 <pre data-language="typescript">loadModule(request: string, callback: function(err, source, sourceMap, module))</pre>
-<p>Resolves the given request to a module, applies all configured loaders and calls back with the generated source, the sourceMap and the module instance (usually an instance of <a href="https://github.com/webpack/webpack/blob/master/lib/NormalModule.js"><code>NormalModule</code></a>). Use this function if you need to know the source code of another module to generate the result.</p>
+<p>Resolves the given request to a module, applies all configured loaders and calls back with the generated source, the sourceMap and the module instance (usually an instance of <a href="https://github.com/webpack/webpack/blob/main/lib/NormalModule.js"><code>NormalModule</code></a>). Use this function if you need to know the source code of another module to generate the result.</p>
 <p><code>this.loadModule</code> in a loader context uses CommonJS resolve rules by default. Use <code>this.getResolve</code> with an appropriate <code>dependencyType</code>, e.g. <code>'esm'</code>, <code>'commonjs'</code> or a custom one before using a different semantic.</p>
 <h3>
 this.loaders
@@ -636,7 +665,7 @@ <h2>
 <ul>
 <li>Loaders should prefer to use <code>this.getLogger()</code> for logging which is a shortcut to <code>compilation.getLogger()</code> with loader path and processed file. This kind of logging is stored to the Stats and formatted accordingly. It can be filtered and exported by the webpack user.</li>
 <li>Loaders may use <code>this.getLogger('name')</code> to get an independent logger with a child name. Loader path and processed file is still added.</li>
-<li>Loaders may use special fallback logic for detecting logging support <code>this.getLogger() ? this.getLogger() : console</code> to provide a fallback when an older webpack version is used which does not support <code>getLogger</code> method.</li>
+<li>Loaders may use special fallback logic for detecting logging support <code>this.getLogger ? this.getLogger() : console</code> to provide a fallback when an older webpack version is used which does not support <code>getLogger</code> method.</li>
 </ul>
 </div>
 <div class="_attribution">

diff --git a/webpack~5/api/logging.html b/webpack~5/api/logging.html
@@ -15,7 +15,7 @@
 
   <link rel="canonical" href="https://docs.w3cub.com/webpack~5/api/logging.html">
   <link href="/favicon.png" rel="icon">
-  <link rel="stylesheet" type="text/css" href="/assets/application-9c7b0d969c0ce639a6c01c2badcdd81667c7c66206aa3d0fccc5cb0585fb1b912dab72ea882101d18010680927514b4b77b107282db8f756fbf63301fe9c88b0.css">
+  <link rel="stylesheet" type="text/css" href="/assets/application-c8f743fc70bb84079c3cf4b71f5f99835529659c30689b2fd6193651a680f383ef1d96896f8966c7ca8a0160ffd557685bb8ad12820ec6002d60143812238086.css">
   <script type="text/javascript" src="/assets/application-79c555f6b25481fffac2cac30a7f3e54e608ca09e9e8e42bb1790095ba6d0fcace47d6bc624ddce952c70370892f2d46864f89e6943d4f7f7ff16c8a3231a91a.js"></script>
   <script src="/json/webpack~5.js"></script>