diff --git a/src/content/api/cli.mdx b/src/content/api/cli.mdx
index 1e8f6e899cec..36bd8fb121c3 100644
--- a/src/content/api/cli.mdx
+++ b/src/content/api/cli.mdx
@@ -503,7 +503,7 @@ In case your configuration file exports multiple configurations, you can use `--
 Consider the following `webpack.config.js`:
 
 ```js
-module.exports = [
+export default [
   {
     output: {
       filename: './dist-first.js',
@@ -617,7 +617,7 @@ In addition to the customized `env` showed above, there are some built-in ones u
 Note that you can not access those built-in environment variables inside the bundled code.
 
 ```javascript
-module.exports = (env, argv) => {
+export default (env, argv) => {
   return {
     mode: env.WEBPACK_SERVE ? 'development' : 'production',
   };
@@ -649,7 +649,7 @@ When the `mode` option is not specified in the configuration, you can use the `-
 If your configuration exports a function, the value of `--config-node-env` is assigned to mode after the function returns. This means that `mode` will not be available in the function arguments (`env` and `argv`). However, the value of `--config-node-env` is accessible as `argv.nodeEnv` within the function and can be used accordingly.
 
 ```javascript
-module.exports = (env, argv) => {
+export default (env, argv) => {
   console.log(argv.defineProcessEnvNodeEnv); // 'production' if --config-node-env production is used
   return {
     // your configuration
diff --git a/src/content/api/loaders.mdx b/src/content/api/loaders.mdx
index 4c9a2620a260..86a4d063a78a 100644
--- a/src/content/api/loaders.mdx
+++ b/src/content/api/loaders.mdx
@@ -48,9 +48,9 @@ Either `return` or `this.callback` can be used to return the transformed `conten
 **sync-loader.js**
 
 ```javascript
-module.exports = function (content, map, meta) {
+export default function (content, map, meta) {
   return someSyncOperation(content);
-};
+}
 ```
 
 The `this.callback` method is more flexible as you pass multiple arguments instead of using `content` only.
@@ -58,10 +58,10 @@ The `this.callback` method is more flexible as you pass multiple arguments inste
 **sync-loader-with-multiple-results.js**
 
 ```javascript
-module.exports = function (content, map, meta) {
+export default function (content, map, meta) {
   this.callback(null, someSyncOperation(content), map, meta);
   return; // always return undefined when calling callback()
-};
+}
 ```
 
 ### Asynchronous Loaders
@@ -71,10 +71,10 @@ For asynchronous loaders, you can return the transformed `content` from an `asyn
 **async-loader.js**
 
 ```javascript
-module.exports = async function (content, map, meta) {
+export default async function (content, map, meta) {
   var result = await someAsyncOperation(content);
   return result;
-};
+}
 ```
 
 Or you can use [`this.async`](#thisasync) to retrieve the `callback` function:
@@ -82,25 +82,25 @@ Or you can use [`this.async`](#thisasync) to retrieve the `callback` function:
 **async-loader-with-callback.js**
 
 ```javascript
-module.exports = function (content, map, meta) {
+export default function (content, map, meta) {
   var callback = this.async();
   someAsyncOperation(content, function (err, result) {
     if (err) return callback(err);
     callback(null, result, map, meta);
   });
-};
+}
 ```
 
 **async-loader-with-multiple-results.js**
 
 ```javascript
-module.exports = function (content, map, meta) {
+export default function (content, map, meta) {
   var callback = this.async();
   someAsyncOperation(content, function (err, result, sourceMaps, meta) {
     if (err) return callback(err);
     callback(null, result, sourceMaps, meta);
   });
-};
+}
 ```
 
 T> Loaders were originally designed to work in synchronous loader pipelines, like Node.js (using [enhanced-require](https://github.com/webpack/enhanced-require)), _and_ asynchronous pipelines, like in webpack. However, since expensive synchronous computations are a bad idea in a single-threaded environment like Node.js, we advise making your loader asynchronous if possible. Synchronous loaders are ok if the amount of computation is trivial.
@@ -112,13 +112,13 @@ By default, the resource file is converted to a UTF-8 string and passed to the l
 **raw-loader.js**
 
 ```javascript
-module.exports = function (content) {
+export default function (content) {
   assert(content instanceof Buffer);
   return someSyncOperation(content);
   // return value can be a `Buffer` too
   // This is also allowed if loader is not "raw"
-};
-module.exports.raw = true;
+}
+export const raw = true;
 ```
 
 ### Pitching Loader
@@ -130,7 +130,7 @@ T> Loaders may be added inline in requests and disabled via inline prefixes, whi
 For the following configuration of [`use`](/configuration/module/#ruleuse):
 
 ```javascript
-module.exports = {
+export default {
   //...
   module: {
     rules: [
@@ -160,11 +160,11 @@ So why might a loader take advantage of the "pitching" phase?
 First, the `data` passed to the `pitch` method is exposed in the execution phase as well under `this.data` and could be useful for capturing and sharing information from earlier in the cycle.
 
 ```javascript
-module.exports = function (content) {
+export default function (content) {
   return someSyncOperation(content, this.data.value);
-};
+}
 
-module.exports.pitch = function (remainingRequest, precedingRequest, data) {
+export const pitch = function (remainingRequest, precedingRequest, data) {
   data.value = 42;
 };
 ```
@@ -172,16 +172,16 @@ module.exports.pitch = function (remainingRequest, precedingRequest, data) {
 Second, if a loader delivers a result in the `pitch` method, the process turns around and skips the remaining loaders. In our example above, if the `b-loader`s `pitch` method returned something:
 
 ```javascript
-module.exports = function (content) {
+export default function (content) {
   return someSyncOperation(content);
-};
+}
 
-module.exports.pitch = function (remainingRequest, precedingRequest, data) {
+export const pitch = function (remainingRequest, precedingRequest, data) {
   if (someCondition()) {
     return (
-      'module.exports = require(' +
+      'import _from_loader from ' +
       JSON.stringify('-!' + remainingRequest) +
-      ');'
+      '; export default _from_loader;'
     );
   }
 };
@@ -206,7 +206,7 @@ Given the following example, this require call is used:
 In `/abc/file.js`:
 
 ```javascript
-require('./loader1?xyz!loader2!./resource?rrr');
+import './loader1?xyz!loader2!./resource?rrr';
 ```
 
 ### this.addContextDependency
@@ -397,10 +397,10 @@ All dependencies of the resolving operation are automatically added as dependenc
 Information about HMR for loaders.
 
 ```javascript
-module.exports = function (source) {
+export default function (source) {
   console.log(this.hot); // true if HMR is enabled via --hot flag or webpack configuration
   return source;
-};
+}
 ```
 
 ### this.hashDigest
@@ -452,7 +452,7 @@ An alternative lightweight solution for the child compiler to compile and execut
 **webpack.config.js**
 
 ```js
-module.exports = {
+export default {
   module: {
     rules: [
       {
@@ -624,7 +624,7 @@ Access to the following utilities.
 **my-sync-loader.js**
 
 ```js
-module.exports = function (content) {
+export default function (content) {
   this.utils.contextify(
     this.context,
     this.utils.absolutify(this.context, './index.js')
@@ -637,7 +637,7 @@ module.exports = function (content) {
   mainHash.digest('hex');
   // …
   return content;
-};
+}
 ```
 
 ### this.version
@@ -703,7 +703,7 @@ For example:
 **./src/index.js**
 
 ```javascript
-require('./loader!./lib');
+import './loader!./lib';
 ```
 
 Throwing an error from loader:
@@ -711,9 +711,9 @@ Throwing an error from loader:
 **./src/loader.js**
 
 ```javascript
-module.exports = function (source) {
+export default function (source) {
   throw new Error('This is a Fatal Error!');
-};
+}
 ```
 
 Or pass an error to the callback in async mode:
@@ -721,11 +721,11 @@ Or pass an error to the callback in async mode:
 **./src/loader.js**
 
 ```javascript
-module.exports = function (source) {
+export default function (source) {
   const callback = this.async();
   //...
   callback(new Error('This is a Fatal Error!'), source);
-};
+}
 ```
 
 The module will get bundled like this:
@@ -801,9 +801,9 @@ The loader could look like this:
 **extract-style-loader/index.js**
 
 ```javascript
-const getStylesLoader = require.resolve('./getStyles');
+import getStylesLoader from './getStyles';
 
-module.exports = function (source) {
+export default function (source) {
   if (STYLES_REGEXP.test(source)) {
     source = source.replace(STYLES_REGEXP, '');
     return `import ${JSON.stringify(
@@ -814,16 +814,16 @@ module.exports = function (source) {
     )};${source}`;
   }
   return source;
-};
+}
 ```
 
 **extract-style-loader/getStyles.js**
 
 ```javascript
-module.exports = function (source) {
+export default function (source) {
   const match = source.match(STYLES_REGEXP);
   return match[0];
-};
+}
 ```
 
 ## Logging
diff --git a/src/content/api/logging.mdx b/src/content/api/logging.mdx
index 34e5df7f1bd9..a693c8530054 100644
--- a/src/content/api/logging.mdx
+++ b/src/content/api/logging.mdx
@@ -50,12 +50,12 @@ export class MyWebpackPlugin {
 **my-webpack-loader.js**
 
 ```js
-module.exports = function (source) {
+export default function (source) {
   // you can get Logger with `this.getLogger` in your webpack loaders
   const logger = this.getLogger('my-webpack-loader');
   logger.info('hello Logger');
   return source;
-};
+}
 ```
 
 As you can see from the above `my-webpack-plugin.js` example, there're two types of logging methods,
@@ -84,12 +84,12 @@ It's advised to use `compilation.getLogger` when plugin/logging is related to th
 
 Runtime logger API is only intended to be used as a development tool, it is not intended to be included in [production mode](/configuration/mode/#mode-production).
 
-- `const logging = require('webpack/lib/logging/runtime')`: to use the logger in runtime, require it directly from webpack
+- `import logging from 'webpack/lib/logging/runtime'`: to use the logger in runtime, require it directly from webpack
 - `logging.getLogger('name')`: to get individual logger by name
 - `logging.configureDefaultLogger(...)`: to override the default logger.
 
 ```javascript
-const logging = require('webpack/lib/logging/runtime');
+import logging from 'webpack/lib/logging/runtime';
 logging.configureDefaultLogger({
   level: 'log',
   debug: /something/,
diff --git a/src/content/api/module-methods.mdx b/src/content/api/module-methods.mdx
index fd27ca8140b2..6d5ffe58a313 100644
--- a/src/content/api/module-methods.mdx
+++ b/src/content/api/module-methods.mdx
@@ -65,7 +65,7 @@ Export anything as a `default` or named export.
 
 ```javascript
 // Named exports
-export var Count = 5;
+export const Count = 5;
 export function Multiply(a, b) {
   return a * b;
 }
@@ -248,8 +248,8 @@ require(dependency: String);
 Synchronously retrieve the exports from another module. The compiler will ensure that the dependency is available in the output bundle.
 
 ```javascript
-var $ = require('jquery');
-var myModule = require('my-module');
+import $ from 'jquery';
+import myModule from 'my-module';
 ```
 
 It's possible to enable magic comments for `require` as well, see [`module.parser.javascript.commonjsMagicComments`](/configuration/module/#moduleparserjavascriptcommonjsmagiccomments) for more.
@@ -275,20 +275,20 @@ Multiple requires of the same module result in only one module execution and onl
 W> This is only needed in rare cases for compatibility!
 
 ```javascript
-var d1 = require('dependency');
-require('dependency') === d1;
-delete require.cache[require.resolve('dependency')];
-require('dependency') !== d1;
+import d1 from 'dependency';
+// In ESM, module caching is handled automatically.
+// Manual cache deletion like in CommonJS is not supported.
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept('dependency', (newModule) => {
+    // Handle module update here
+  });
+}
 ```
 
 ```javascript
 // in file.js
-require.cache[module.id] === module;
-require('./file.js') === module.exports;
-delete require.cache[module.id];
-require.cache[module.id] === undefined;
-require('./file.js') !== module.exports; // in theory; in praxis this causes a stack overflow
-require.cache[module.id] !== module;
+// In ESM, manual cache manipulation is not supported.
+// Webpack handles module caching internally.
 ```
 
 ### require.ensure
@@ -309,13 +309,13 @@ Split out the given `dependencies` to a separate bundle that will be loaded asyn
 W> This feature relies on [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) internally. If you use `require.ensure` with older browsers, remember to shim `Promise` using a polyfill such as [es6-promise](https://github.com/stefanpenner/es6-promise) or [promise-polyfill](https://github.com/taylorhakes/promise-polyfill).
 
 ```javascript
-var a = require('normal-dep');
+const a = require('normal-dep');
 
 if (module.hot) {
-  require.ensure(['b'], function (require) {
-    var c = require('c');
-
-    // Do something special...
+  import('b').then(() => {
+    import('c').then((c) => {
+      // Do something special...
+    });
   });
 }
 ```
@@ -331,6 +331,8 @@ W> Although the implementation of `require` is passed as an argument to the `cal
 
 ## AMD
 
+W> These syntaxes are legacy. We highly recommend using ES6 Modules for modern applications.
+
 Asynchronous Module Definition (AMD) is a JavaScript specification that defines an interface for writing and loading modules. The following AMD methods are supported by webpack:
 
 ### define (with factory)
@@ -383,8 +385,10 @@ Similar to `require.ensure`, this will split the given `dependencies` into a sep
 W> This feature relies on [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) internally. If you use AMD with older browsers (e.g. Internet Explorer 11), remember to shim `Promise` using a polyfill such as [es6-promise](https://github.com/stefanpenner/es6-promise) or [promise-polyfill](https://github.com/taylorhakes/promise-polyfill).
 
 ```javascript
-require(['b'], function (b) {
-  var c = require('c');
+import('b').then((b) => {
+  import('c').then((c) => {
+    // b और c का इस्तेमाल करें
+  });
 });
 ```
 
@@ -392,6 +396,8 @@ W> There is no option to provide a chunk name.
 
 ## Labeled Modules
 
+W> These syntaxes are legacy. We highly recommend using ES6 Modules for modern applications.
+
 The internal `LabeledModulesPlugin` enables you to use the following methods for exporting and requiring within your modules:
 
 ### export label
@@ -399,7 +405,7 @@ The internal `LabeledModulesPlugin` enables you to use the following methods for
 Export the given `value`. The label can occur before a function declaration or a variable declaration. The function name or variable name is the identifier under which the value is exported.
 
 ```ts
-export: var answer = 42;
+export: const answer = 42;
 export: function method(value) {
   // Do something...
 };
@@ -414,7 +420,7 @@ Make all exports from the dependency available in the current scope. The `requir
 **some-dependency.js**
 
 ```ts
-export: var answer = 42;
+export: const answer = 42;
 export: function method(value) {
   // Do something...
 };
@@ -444,14 +450,21 @@ require.context(
 Specify a whole group of dependencies using a path to the `directory`, an option to `includeSubdirs`, a `filter` for more fine grained control of the modules included, and a `mode` to define the way how loading will work. Underlying modules can then be resolved later on:
 
 ```javascript
-var context = require.context('components', true, /\.html$/);
-var componentA = context.resolve('componentA');
+const context = import.meta.webpackContext('components', {
+  recursive: true,
+  regExp: /\.html$/,
+});
+const componentA = context.resolve('componentA');
 ```
 
 If `mode` is set to `'lazy'`, the underlying modules will be loaded asynchronously:
 
 ```javascript
-var context = require.context('locales', true, /\.json$/, 'lazy');
+const context = import.meta.webpackContext('locales', {
+  recursive: true,
+  regExp: /\.json$/,
+  mode: 'lazy',
+});
 context('localeA').then((locale) => {
   // do something with locale
 });
@@ -468,12 +481,10 @@ require.include((dependency: String));
 Include a `dependency` without executing it. This can be used for optimizing the position of a module in the output chunks.
 
 ```javascript
-require.include('a');
-require.ensure(['a', 'b'], function (require) {
-  /* ... */
-});
-require.ensure(['a', 'c'], function (require) {
-  /* ... */
+import('a');
+import('b');
+import('c').then((moduleC) => {
+  // Use moduleC here
 });
 ```
 
diff --git a/src/content/api/module-variables.mdx b/src/content/api/module-variables.mdx
index 7b24630569ee..f7b90c0f01d5 100644
--- a/src/content/api/module-variables.mdx
+++ b/src/content/api/module-variables.mdx
@@ -36,31 +36,31 @@ Indicates whether or not [Hot Module Replacement](/concepts/hot-module-replaceme
 The ID of the current module.
 
 ```javascript
-module.id === require.resolve('./file.js');
+console.log(import.meta.url);
 ```
 
-## module.exports (CommonJS)
+## export default
 
-Defines the value that will be returned when a consumer makes a `require` call to the module (defaults to a new object).
+Defines the value that will be returned when a consumer makes a `import` call to the module (defaults to a new object).
 
 ```javascript
-module.exports = function doSomething() {
+export default function doSomething() {
   // Do something...
-};
+}
 ```
 
 W> This CANNOT be used in an asynchronous function.
 
 ## exports (CommonJS)
 
-This variable is equal to the default value of `module.exports` (i.e. an object). If `module.exports` gets overwritten, `exports` will no longer be exported.
+Named exports allow you to export multiple variables, functions, or objects from a single module. Unlike a default export, you must use the exact name when importing these values.
 
 ```javascript
-exports.someValue = 42;
-exports.anObject = {
+export const someValue = 42;
+export const anObject = {
   x: 123,
 };
-exports.aFunction = function doSomething() {
+export const aFunction = function doSomething() {
   // Do something
 };
 ```
@@ -167,10 +167,10 @@ If used inside an expression that is parsed by the Parser, the configuration opt
 
 ## \_\_resourceQuery (webpack-specific)
 
-The resource query of the current module. If the following `require` call was made, then the query string would be available in `file.js`.
+The resource query of the current module. If the following `import` call was made, then the query string would be available in `file.js`.
 
 ```javascript
-require('file.js?test');
+import 'file.js?test';
 ```
 
 **file.js**
@@ -265,14 +265,12 @@ In modules, `__webpack_exports_info__` is available to allow exports introspecti
 - `__webpack_exports_info__.<exportName>.used` is `false` when the export is known to be unused, `true` otherwise
 
 - `__webpack_exports_info__.<exportName>.useInfo` is
-
   - `false` when the export is known to be unused
   - `true` when the export is known to be used
   - `null` when the export usage could depend on runtime conditions
   - `undefined` when no info is available
 
 - `__webpack_exports_info__.<exportName>.provideInfo` is
-
   - `false` when the export is known to be not provided
   - `true` when the export is known to be provided
   - `null` when the export provision could depend on runtime conditions
diff --git a/src/content/api/node.mdx b/src/content/api/node.mdx
index e5e6dfa64f6f..a173ad739e1c 100644
--- a/src/content/api/node.mdx
+++ b/src/content/api/node.mdx
@@ -26,13 +26,7 @@ To start using the webpack Node.js API, first install webpack if you haven’t y
 npm install --save-dev webpack
 ```
 
-Then require the webpack module in your Node.js script:
-
-```js
-const webpack = require('webpack');
-```
-
-Or if you prefer ES2015:
+Then import the webpack module in your Node.js script:
 
 ```js
 import webpack from 'webpack';
@@ -43,7 +37,7 @@ import webpack from 'webpack';
 The imported `webpack` function is fed a webpack [Configuration Object](/configuration/) and runs the webpack compiler if a callback function is provided:
 
 ```js
-const webpack = require('webpack');
+import webpack from 'webpack';
 
 webpack({}, (err, stats) => {
   if (err || stats.hasErrors()) {
@@ -95,7 +89,7 @@ Calling the `run` method on the `Compiler` instance is much like the quick run
 method mentioned above:
 
 ```js
-const webpack = require('webpack');
+import webpack from 'webpack';
 
 const compiler = webpack({
   // ...
@@ -123,7 +117,7 @@ watch(watchOptions, callback);
 ```
 
 ```js
-const webpack = require('webpack');
+import webpack from 'webpack';
 
 const compiler = webpack({
   // ...
@@ -240,7 +234,7 @@ stats.toString({
 Here’s an example of `stats.toString()` usage:
 
 ```js
-const webpack = require('webpack');
+import webpack from 'webpack';
 
 webpack(
   {
@@ -270,7 +264,7 @@ an array of options, webpack applies separate compilers and calls the
 `callback` after all compilers have been executed.
 
 ```js
-var webpack = require('webpack');
+import webpack from 'webpack';
 
 webpack(
   [
@@ -298,7 +292,7 @@ For good error handling, you need to account for these three types of errors:
 Here’s an example that does all that:
 
 ```js
-const webpack = require('webpack');
+import webpack from 'webpack';
 
 webpack(
   {
@@ -339,8 +333,8 @@ replace the default `outputFileSystem` with
 instead of to disk:
 
 ```js
-const { createFsFromVolume, Volume } = require('memfs');
-const webpack = require('webpack');
+import { createFsFromVolume, Volume } from 'memfs';
+import webpack from 'webpack';
 
 const fs = createFsFromVolume(new Volume());
 const compiler = webpack({
diff --git a/src/content/api/normalmodulefactory-hooks.mdx b/src/content/api/normalmodulefactory-hooks.mdx
index 18617f126760..5927d4cee7b5 100644
--- a/src/content/api/normalmodulefactory-hooks.mdx
+++ b/src/content/api/normalmodulefactory-hooks.mdx
@@ -13,13 +13,20 @@ The `NormalModuleFactory` class extends `Tapable` and provides the following
 lifecycle hooks. They can be tapped the same way as compiler hooks:
 
 ```js
-NormalModuleFactory.hooks.someHook.tap(/* ... */);
+const nmf = NormalModuleFactory.hooks;
+nmf.someHook.tap('MyPlugin', (resolveData) => {
+  // ...
+});
 ```
 
-NormaleModuleFactory creates `Parser` and `Generator` instances which can be accessed by HookMaps. Identifier must be passed to tap into these:
+NormalModuleFactory creates `Parser` and `Generator` instances which can be accessed by HookMaps. Identifier must be passed to tap into these:
 
 ```js
-NormalModuleFactory.hooks.someHook.for('identifier').tap(/* ... */);
+NormalModuleFactory.hooks.parser
+  .for('javascript/esm')
+  .tap('MyPlugin', (parser, parserOptions) => {
+    // ...
+  });
 ```
 
 As with the `compiler`, `tapAsync` and `tapPromise` may also be available
diff --git a/src/content/api/parser.mdx b/src/content/api/parser.mdx
index dc3e4ddaa42d..ec9d343321ee 100644
--- a/src/content/api/parser.mdx
+++ b/src/content/api/parser.mdx
@@ -24,7 +24,9 @@ compiler.hooks.normalModuleFactory.tap('MyPlugin', (factory) => {
   factory.hooks.parser
     .for('javascript/auto')
     .tap('MyPlugin', (parser, options) => {
-      parser.hooks.someHook.tap(/* ... */);
+      parser.hooks.someHook.tap('MyPlugin', (data) => {
+        // ...
+      });
     });
 });
 ```
@@ -378,7 +380,7 @@ Triggered before renaming an identifier to determine if the renaming is allowed.
 - Callback Parameters: `expression`
 
 ```js
-var a = b;
+const a = b;
 
 parser.hooks.canRename.for('b').tap('MyPlugin', (expression) => {
   // returning true allows renaming
@@ -396,12 +398,12 @@ Triggered when renaming to get the new identifier. This hook will be called only
 - Callback Parameters: `expression`
 
 ```js
-var a = b;
+const a = b;
 
 parser.hooks.rename.for('b').tap('MyPlugin', (expression) => {});
 ```
 
-### assigned
+### assign (before parsing assigned expression)
 
 `SyncBailHook`
 
@@ -413,12 +415,12 @@ Called when parsing an `AssignmentExpression` before parsing the assigned expres
 ```js
 a += b;
 
-parser.hooks.assigned.for('a').tap('MyPlugin', (expression) => {
+parser.hooks.assign.for('a').tap('MyPlugin', (expression) => {
   // this is called before parsing b
 });
 ```
 
-### assign
+### assign (before parsing target)
 
 `SyncBailHook`
 
@@ -430,7 +432,7 @@ Called when parsing an `AssignmentExpression` before parsing the assign expressi
 ```js
 a += b;
 
-parser.hooks.assigned.for('a').tap('MyPlugin', (expression) => {
+parser.hooks.assign.for('a').tap('MyPlugin', (expression) => {
   // this is called before parsing a
 });
 ```
diff --git a/src/content/api/resolvers.mdx b/src/content/api/resolvers.mdx
index 937ce742889a..e08b3561a459 100644
--- a/src/content/api/resolvers.mdx
+++ b/src/content/api/resolvers.mdx
@@ -29,10 +29,9 @@ can be customized via plugins:
 
 ```js
 compiler.resolverFactory.hooks.resolver
-  .for('[type]')
-  .tap('name', (resolver) => {
-    // you can tap into resolver.hooks now
-    resolver.hooks.result.tap('MyPlugin', (result) => {
+  .for('normal')
+  .tap('MyResolverPlugin', (resolver) => {
+    resolver.hooks.result.tap('MyResolverPlugin', (result) => {
       return result;
     });
   });
diff --git a/src/content/api/webpack-dev-server.mdx b/src/content/api/webpack-dev-server.mdx
index c33e2010a1b4..1e2f1c7398ea 100644
--- a/src/content/api/webpack-dev-server.mdx
+++ b/src/content/api/webpack-dev-server.mdx
@@ -18,8 +18,8 @@ npm install --save-dev webpack webpack-dev-server
 Then require the modules in your Node.js script:
 
 ```js
-const Webpack = require('webpack');
-const WebpackDevServer = require('webpack-dev-server');
+import Webpack from 'webpack';
+import WebpackDevServer from 'webpack-dev-server';
 ```
 
 ## start
@@ -29,9 +29,9 @@ It instructs `webpack-dev-server` instance to start the server.
 **server.js**
 
 ```js
-const Webpack = require('webpack');
-const WebpackDevServer = require('webpack-dev-server');
-const webpackConfig = require('./webpack.config.js');
+import Webpack from 'webpack';
+import WebpackDevServer from 'webpack-dev-server';
+import webpackConfig from './webpack.config.js';
 
 const compiler = Webpack(webpackConfig);
 const devServerOptions = { ...webpackConfig.devServer, open: true };
@@ -58,9 +58,9 @@ It instructs `webpack-dev-server` instance to start the server and then run the
 **server.js**
 
 ```js
-const Webpack = require('webpack');
-const WebpackDevServer = require('webpack-dev-server');
-const webpackConfig = require('./webpack.config.js');
+import Webpack from 'webpack';
+import WebpackDevServer from 'webpack-dev-server';
+import webpackConfig from './webpack.config.js';
 
 const compiler = Webpack(webpackConfig);
 const devServerOptions = { ...webpackConfig.devServer, open: true };
@@ -84,9 +84,9 @@ It instructs `webpack-dev-server` instance to stop the server.
 **server.js**
 
 ```js
-const Webpack = require('webpack');
-const WebpackDevServer = require('webpack-dev-server');
-const webpackConfig = require('./webpack.config.js');
+import Webpack from 'webpack';
+import WebpackDevServer from 'webpack-dev-server';
+import webpackConfig from './webpack.config.js';
 
 const compiler = Webpack(webpackConfig);
 const devServerOptions = { ...webpackConfig.devServer, open: true };
@@ -120,9 +120,9 @@ It instructs `webpack-dev-server` instance to stop the server and then run the c
 **server.js**
 
 ```js
-const Webpack = require('webpack');
-const WebpackDevServer = require('webpack-dev-server');
-const webpackConfig = require('./webpack.config.js');
+import Webpack from 'webpack';
+import WebpackDevServer from 'webpack-dev-server';
+import webpackConfig from './webpack.config.js';
 
 const compiler = Webpack(webpackConfig);
 const devServerOptions = { ...webpackConfig.devServer, open: true };
@@ -153,7 +153,7 @@ Returns the internal `IPv4`/`IPv6` address asynchronously.
 **server.js**
 
 ```js
-const WebpackDevServer = require('webpack-dev-server');
+import WebpackDevServer from 'webpack-dev-server';
 
 const logInternalIPs = async () => {
   const localIPv4 = await WebpackDevServer.internalIP('v4');
@@ -173,7 +173,7 @@ Returns the internal `IPv4`/`IPv6` address synchronously.
 **server.js**
 
 ```js
-const WebpackDevServer = require('webpack-dev-server');
+import WebpackDevServer from 'webpack-dev-server';
 
 const localIPv4 = WebpackDevServer.internalIPSync('v4');
 const localIPv6 = WebpackDevServer.internalIPSync('v6');
diff --git a/src/content/guides/getting-started.mdx b/src/content/guides/getting-started.mdx
index 79ef48512356..c09b48c96809 100644
--- a/src/content/guides/getting-started.mdx
+++ b/src/content/guides/getting-started.mdx
@@ -250,9 +250,9 @@ As of version 4, webpack doesn't require any configuration, but most projects wi
 **webpack.config.js**
 
 ```javascript
-const path = require('path');
+import path from 'path';
 
-module.exports = {
+export default {
   entry: './src/index.js',
   output: {
     filename: 'main.js',