docs: improve wordings (#7158)

Author: snitin315

src/content/api/loaders.mdx

@@ -50,7 +50,7 @@ module.exports = function (content, map, meta) {
 };
 ```
 
-The `this.callback` method is more flexible as it allows multiple arguments to be passed as opposed to only the `content`.
+The `this.callback` method is more flexible as you pass multiple arguments instead of using `content` only.
 
 **sync-loader-with-multiple-results.js**
 
@@ -780,4 +780,4 @@ Logging API is available since the release of webpack 4.37. When `logging` is en
 
 - Loaders should prefer to use `this.getLogger()` for logging which is a shortcut to `compilation.getLogger()` 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.
 - Loaders may use `this.getLogger('name')` to get an independent logger with a child name. Loader path and processed file is still added.
-- Loaders may use special fallback logic for detecting logging support `this.getLogger ? this.getLogger() : console` to provide a fallback when an older webpack version is used which does not support `getLogger` method.
+- Loaders may use specific fallback logic for detecting logging support `this.getLogger ? this.getLogger() : console` to provide a fallback when an older webpack version is used which does not support `getLogger` method.

src/content/api/module-methods.mdx

@@ -96,7 +96,7 @@ W> This feature relies on [`Promise`](https://developer.mozilla.org/en-US/docs/W
 
 It is not possible to use a fully dynamic import statement, such as `import(foo)`. Because `foo` could potentially be any path to any file in your system or project.
 
-The `import()` must contain at least some information about where the module is located. Bundling can be limited to a specific directory or set of files so that when you are using a dynamic expression - every module that could potentially be requested on an `import()` call is included. For example, `` import(`./locale/${language}.json`) `` will cause every `.json` file in the `./locale` directory to be bundled into the new chunk. At run time, when the variable `language` has been computed, any file like `english.json` or `german.json` will be available for consumption.
+The `import()` must contain at least some information about where the module is located. Bundling can be limited to a specific directory or set of files so that when you are using a dynamic expression - every module that could potentially be requested on an `import()` call is included. For example, ``import(`./locale/${language}.json`)`` will cause every `.json` file in the `./locale` directory to be bundled into the new chunk. At run time, when the variable `language` has been computed, any file like `english.json` or `german.json` will be available for consumption.
 
 ```javascript
 // imagine we had a method to get language from cookies or other storage
@@ -166,7 +166,7 @@ import(
 Since webpack 2.6.0, different modes for resolving dynamic imports can be specified. The following options are supported:
 
 - `'lazy'` (default): Generates a lazy-loadable chunk for each `import()`ed module.
-- `'lazy-once'`: Generates a single lazy-loadable chunk that can satisfy all calls to `import()`. The chunk will be fetched on the first call to `import()`, and subsequent calls to `import()` will use the same network response. Note that this only makes sense in the case of a partially dynamic statement, e.g. `` import(`./locales/${language}.json`) ``, where multiple module paths that can potentially be requested.
+- `'lazy-once'`: Generates a single lazy-loadable chunk that can satisfy all calls to `import()`. The chunk will be fetched on the first call to `import()`, and subsequent calls to `import()` will use the same network response. Note that this only makes sense in the case of a partially dynamic statement, e.g. ``import(`./locales/${language}.json`)``, where multiple module paths that can potentially be requested.
 - `'eager'`: Generates no extra chunk. All modules are included in the current chunk and no additional network requests are made. A `Promise` is still returned but is already resolved. In contrast to a static import, the module isn't executed until the call to `import()` is made.
 - `'weak'`: Tries to load the module if the module function has already been loaded in some other way (e.g. another chunk imported it or a script containing the module was loaded). A `Promise` is still returned, but only successfully resolves if the chunks are already on the client. If the module is not available, the `Promise` is rejected. A network request will never be performed. This is useful for universal rendering when required chunks are always manually served in initial requests (embedded within the page), but not in cases where app navigation will trigger an import not initially served.
 
@@ -398,7 +398,7 @@ 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 easily resolved later on:
+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$/);

src/content/api/plugins.mdx

@@ -93,47 +93,47 @@ you need to do the following:
 
 1. Create a module-scope `WeakMap` for compilation hooks:
 
-    ```ts
-    const compilationHooks = new WeakMap<Compilation, MyHooks>();
+   ```ts
+   const compilationHooks = new WeakMap<Compilation, MyHooks>();
 
-    interface MyHooks {
-      custom: SyncHook<[number, string]>;
-    }
-    ```
+   interface MyHooks {
+     custom: SyncHook<[number, string]>;
+   }
+   ```
 
 2. Create a static method on your plugin:
 
-    ```ts
-    static getCompilationHooks(compilation: Compilation) : MyHooks {
-      let hooks = compilationHooks.get(compilation);
-      if(hooks === undefined) {
-        compilationHooks.set(compilation, hooks = {
-          custom: new SyncHook()
-        });
-      }
-      return hooks;
-    }
-    ```
+   ```ts
+   static getCompilationHooks(compilation: Compilation) : MyHooks {
+     let hooks = compilationHooks.get(compilation);
+     if(hooks === undefined) {
+       compilationHooks.set(compilation, hooks = {
+         custom: new SyncHook()
+       });
+     }
+     return hooks;
+   }
+   ```
 
 3. Call hooks like below in your plugin:
 
-    ```ts
-    const hooks = MyPlugin.getCompilationHooks(compilation);
+   ```ts
+   const hooks = MyPlugin.getCompilationHooks(compilation);
 
-    hooks.custom.call(1, 'hello');
-    ```
+   hooks.custom.call(1, 'hello');
+   ```
 
 4. Other plugins can access your custom hooks too:
 
-    ```ts
-    import MyPlugin from 'my-plugin';
+   ```ts
+   import MyPlugin from 'my-plugin';
 
-    const hooks = MyPlugin.getCompilationHooks(compilation);
+   const hooks = MyPlugin.getCompilationHooks(compilation);
 
-    hooks.custom.tap('OtherPlugin', (n, s) => {
-      // magic
-    });
-    ```
+   hooks.custom.tap('OtherPlugin', (n, s) => {
+     // magic
+   });
+   ```
 
 Again, see the [documentation](https://github.com/webpack/tapable) for `tapable` to learn more about the
 different hook classes and how they work.
@@ -180,7 +180,7 @@ Logging API is available since the release of webpack 4.37. When `logging` is en
 
 - Plugins should prefer to use `compilation.getLogger('PluginName')` for logging. This kind of logging is stored in the Stats and formatted accordingly. It can be filtered and exported by the user.
 - Plugins may use the `compiler.getInfrastructureLogger('PluginName')` for logging. Using `infrastructure` logging is not stored in the Stats and therefore not formatted. It's usually logged to the console/dashboard/GUI directly. It can be filtered by the user.
-- Plugins may use special fallback logic for detecting logging support `compilation.getLogger ? compilation.getLogger('PluginName') : console` to provide a fallback for cases when an older webpack version is used which does not support `getLogger` method on `compilation` object.
+- Plugins may use specific fallback logic for detecting logging support `compilation.getLogger ? compilation.getLogger('PluginName') : console` to provide a fallback for cases when an older webpack version is used which does not support `getLogger` method on `compilation` object.
 
 ## Next Steps
 

src/content/branding.mdx

@@ -79,7 +79,7 @@ Square-sized icon for smaller areas (like favicons):
 
 [svg](https://github.com/webpack/media/blob/master/logo/icon-square-small.svg) | [png](https://github.com/webpack/media/blob/master/logo/icon-square-small.png) | [jpg](https://github.com/webpack/media/blob/master/logo/icon-square-small.jpg)
 
-T> For those of you following our guidelines and have gotten this far, we've made a special smaller size image used especially for custom emoji (like in a slack or gitter channel ;))
+T> For those of you following our guidelines and have gotten this far, we've made a smaller size image used especially for custom emoji (like in a slack or gitter channel ;))
 
 <img
   src="/assets/icon-square-small-slack.png"

src/content/concepts/index.mdx

@@ -42,8 +42,8 @@ This document is intended to give a **high-level** overview of these concepts, w
 For a better understanding of the ideas behind module bundlers and how they work under the hood, consult these resources:
 
 - [Manually Bundling an Application](https://www.youtube.com/watch?v=UNMkLHzofQI)
-- [Live Coding a Simple Module Bundler](https://www.youtube.com/watch?v=Gc9-7PBqOC8)
-- [Detailed Explanation of a Simple Module Bundler](https://github.com/ronami/minipack)
+- [Live Coding a Basic Module Bundler](https://www.youtube.com/watch?v=Gc9-7PBqOC8)
+- [Detailed Explanation of a Basic Module Bundler](https://github.com/ronami/minipack)
 
 ## Entry
 

src/content/configuration/experiments.mdx

@@ -102,7 +102,7 @@ When enabled, webpack can build remote resources that begin with the `http(s):`
   ```js
   // src/index.js
   import pMap1 from 'https://cdn.skypack.dev/p-map';
-  // with `buildHttp` enabled, webpack will build pMap1 just like a regular local module
+  // with `buildHttp` enabled, webpack will build pMap1 like a regular local module
   console.log(pMap1);
   ```
 

src/content/guides/code-splitting.mdx

@@ -436,7 +436,7 @@ const lazyComp = () =>
   });
 ```
 
-If the script loading will fail before webpack starts loading of that script by itself (webpack just creates a script tag to load its code, if that script is not on a page), that catch handler won't start till [chunkLoadTimeout](/configuration/output/#outputchunkloadtimeout) is not passed. This behavior can be unexpected. But it's explainable — webpack can not throw any error, cause webpack doesn't know, that script failed. Webpack will add onerror handler to the script right after the error has happen.
+If the script loading will fail before webpack starts loading of that script by itself (webpack creates a script tag to load its code, if that script is not on a page), that catch handler won't start till [chunkLoadTimeout](/configuration/output/#outputchunkloadtimeout) is not passed. This behavior can be unexpected. But it's explainable — webpack can not throw any error, cause webpack doesn't know, that script failed. Webpack will add onerror handler to the script right after the error has happen.
 
 To prevent such problem you can add your own onerror handler, which removes the script in case of any error:
 

src/content/guides/hot-module-replacement.mdx

@@ -397,7 +397,7 @@ There are many other loaders and examples out in the community to make HMR inter
 - [React Hot Loader](https://github.com/gaearon/react-hot-loader): Tweak react components in real time.
 - [Vue Loader](https://github.com/vuejs/vue-loader): This loader supports HMR for vue components out of the box.
 - [Elm Hot webpack Loader](https://github.com/klazuka/elm-hot-webpack-loader): Supports HMR for the Elm programming language.
-- [Angular HMR](https://angular.io/cli/serve): No loader necessary! HMR support is built in the Angular CLI, simply add the `--hmr` flag to you `ng serve` command.
+- [Angular HMR](https://angular.io/cli/serve): No loader necessary! HMR support is built in the Angular CLI, add the `--hmr` flag to you `ng serve` command.
 - [Svelte Loader](https://github.com/sveltejs/svelte-loader): This loader supports HMR for Svelte components out of the box.
 
 T> If you know of any other loaders or plugins that help with or enhance HMR, please submit a pull request to add them to this list!

src/content/guides/shimming.mdx

@@ -301,7 +301,7 @@ and `import` it so as to include it in our main bundle:
  document.body.appendChild(component());
 ```
 
-T> Note that we aren't binding the `import` to a variable. This is because polyfills simply run on their own, prior to the rest of the code base, allowing us to then assume certain native functionality exists.
+T> Note that we aren't binding the `import` to a variable. This is because polyfills run on their own, prior to the rest of the code base, allowing us to then assume certain native functionality exists.
 
 Note that this approach prioritizes correctness over bundle size. To be safe and robust, polyfills/shims must run **before all other code**, and thus either need to load synchronously, or, all app code needs to load after all polyfills/shims load.
 There are many misconceptions in the community, as well, that modern browsers "don't need" polyfills, or that polyfills/shims merely serve to add missing features - in fact, they often _repair broken implementations_, even in the most modern of browsers.

src/content/guides/typescript.mdx

@@ -181,7 +181,7 @@ See the [devtool documentation](/configuration/devtool/) for more information.
 
 ## Client types
 
-It's possible to use webpack specific features in your TypeScript code, such as [`import.meta.webpack`](/api/module-variables/#importmetawebpack). And webpack provides types for them as well, just add a TypeScript [`reference`](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-) directive to declare it:
+It's possible to use webpack specific features in your TypeScript code, such as [`import.meta.webpack`](/api/module-variables/#importmetawebpack). And webpack provides types for them as well, add a TypeScript [`reference`](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-) directive to declare it:
 
 ```ts
 /// <reference types="webpack/module" />