Merge branch 'main' into new-governance-section

Author: Jatinyadav29

.github/CODE_OF_CONDUCT.md

@@ -13,12 +13,21 @@ Start by ensuring that you have Node.js installed and forking the repository:
 - Fork the **webpack.js.org** repo from [the main repository][2].
 - `git clone <your-clone-url> && cd webpack.js.org`
 
+> To run the project, you must run scripts that download the website content from GitHub.
+> To avoid hitting rate limits, you'll need to use your GitHub token.
+> The build scripts (`fetch-repo` and `fetch:*` commands) use this token to retrieve repository data,
+> including documentation, examples, and contributors.
+> If you do not have one, you can create it on the [GitHub Personal Access Tokens page](https://github.com/settings/personal-access-tokens).
+
 Once you are in the project directory, run the following commands:
 
 - `yarn` to pull all dependencies.
+- `GITHUB_TOKEN=<your-token-here> yarn fetch-all` - Fetches all updated website content from GitHub.
 - `yarn build` to create a production version of the site.
 - `yarn start` to develop on a local webpack-dev-server: [localhost:3000][3].
 
+**Note:** The `fetch` and `fetch-repos` commands must be run before building the site as they populate necessary data for the build process.
+
 > NOTE: run `yarn fetch-repos` and then `yarn fetch` before running `yarn start` command for the first time
 
 - `yarn fetch` to retrieve external documentation/data.

.github/CONTRIBUTING.md

@@ -36,6 +36,7 @@
     "fetch:readmes": "node src/utilities/fetch-package-readmes.mjs",
     "fetch:supporters": "node src/utilities/fetch-supporters.mjs",
     "fetch:governance": "node src/utilities/fetch-governance.mjs",
+    "fetch-all": "run-s fetch-repos fetch",
     "prebuild": "npm run clean",
     "build": "run-s fetch-repos fetch:governance fetch content && webpack --config webpack.prod.mjs --config-node-env production && run-s printable content && webpack --config webpack.ssg.mjs --config-node-env production --env ssg",
     "postbuild": "npm run sitemap",

.github/FUNDING.yml

@@ -14,6 +14,7 @@ contributors:
   - jamesgeorge007
   - WofWca
   - snitin315
+  - adriancuadrado
 related:
   - title: CommonJS Wikipedia
     url: https://en.wikipedia.org/wiki/CommonJS
@@ -97,7 +98,8 @@ 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 only bundle all `.json` files in the `./locale` directory and subdirectories into the new chunk and exclude files with other file extensions. 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
@@ -111,7 +113,7 @@ T> Using the [`webpackInclude` and `webpackExclude`](/api/module-methods/#magic-
 
 #### Magic Comments
 
-Inline comments to make features work. By adding comments to the import, we can do things such as name our chunk or select different modes. For a full list of these magic comments see the code below followed by an explanation of what these comments do.
+By adding comments to the import, we can do things such as name our chunk or select different modes. For a full list of these magic comments see the code below followed by an explanation of what these comments do.
 
 ```js
 // Single target
@@ -137,6 +139,8 @@ import(
 import(/* webpackIgnore: true */ 'ignored-module.js');
 ```
 
+T> Single line comments (`//`) are also supported. JSDoc comments (`/** */`) are not.
+
 ##### webpackIgnore
 
 **JavaScript Usage**

.github/ISSUE_TEMPLATE.md

@@ -75,7 +75,7 @@ _People passionate about Webpack (In no particular order)_
 - [CSS Loader](https://github.com/webpack/css-loader): CSS loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
 - [SASS Loader](https://github.com/webpack/sass-loader): SASS loader for Webpack. -- _Maintainer_: `Jorik Tangelder` [![Github][githubicon]](https://github.com/jtangelder) [![Twitter][twittericon]](https://twitter.com/jorikdelaporik)
 - [Less Loader](https://github.com/webpack/less-loader): Less loader module for Webpack. -- _Maintainer_: `Webpack Team` [![Github][githubicon]](https://github.com/webpack)
-- [Stylus Loader](https://github.com/shama/stylus-loader): A stylus loader for webpack. -- _Maintainer_: `Kyle Robinson Young` [![Github][githubicon]](https://github.com/shama) [![Twitter][twittericon]](https://twitter.com/shamakry)
+- [Stylus Loader](https://github.com/webpack/stylus-loader): A stylus loader for webpack. -- _Maintainer_: `Kyle Robinson Young` [![Github][githubicon]](https://github.com/shama) [![Twitter][twittericon]](https://twitter.com/shamakry)
 - [Isomorphic Style Loader](https://github.com/kriasoft/isomorphic-style-loader): Isomorphic CSS style loader for Webpack. -- _Maintainer_: `Kriasoft Team` [![Github][githubicon]](https://github.com/kriasoft) [![Twitter][twittericon]](https://twitter.com/kriasoft)
 - [Minify CSS-in-JS Loader](https://github.com/zaaack/minify-cssinjs-loader): RegExp-based minify CSS-in-JS loader for Webpack, don't need babel. -- _Maintainer_: `Zack Young` [![Github][githubicon]](https://github.com/zaaack) [![Twitter][twittericon]](https://twitter.com/ZaaackYoung)
 - [SASS Resources Loader](https://github.com/shakacode/sass-resources-loader): Globally import SASS resources (variables, mixins, etc.). -- _Maintainer_: `ShakaCode` [![Github][githubicon]](https://github.com/shakacode) [![Twitter][twittericon]](https://twitter.com/shakacode)
@@ -153,7 +153,7 @@ _People passionate about Webpack (In no particular order)_
 - [CSS Cleanup Webpack Plugin](https://github.com/do-web/css-cleanup-webpack-plugin) - A plugin to remove duplicated and unused css rules -- _Maintainer_: `Dominik Weber` [![Github][githubicon]](https://github.com/do-web)
 - [Extension Reloader](https://github.com/rubenspgcavalcante/webpack-extension-reloader) - Hot reloading while developing browser extensions -- _Maintainer_: `Rubens P. G. Cavalcante` [![Github][githubicon]](https://github.com/rubenspgcavalcante) [![Twitter][twittericon]](https://twitter.com/rubenspgc)
 - [Htmls Webpack Plugin](https://github.com/zaaack/htmls-webpack-plugin): Simple and fast multiple-htmls-generating plugin for webpack. -- _Maintainer_: `Zack Young` [![Github][githubicon]](https://github.com/zaaack) [![Twitter][twittericon]](https://twitter.com/ZaaackYoung)
-- [Mini css extract plugin](https://github.com/webpack-contrib/mini-css-extract-plugin):
+- [Mini css extract plugin](https://github.com/webpack/mini-css-extract-plugin):
   Lightweight CSS extraction plugin -- _Maintainer_: `Webpack Contrib` [![Github][githubicon]](https://github.com/webpack-contrib)
 - [build-hash-webpack-plugin](https://github.com/Cosium/build-hash-webpack-plugin) For each build, Webpack generates an in-memory hash allowing to know if two build outputs are the same or not. This plugin writes the described build hash in a separate json file. -- _Maintainer_: `Réda Housni Alaoui` [![Github][githubicon]](https://github.com/reda-alaoui) [![Twitter][twittericon]](https://twitter.com/alaouirda)
 - [webpack-hook-plugin](https://github.com/tienne/webpack-hook-plugin) - run any shell commands before or after webpack builds -- _Maintainer_: `David Kwon` [![Github][githubicon]](https://github.com/tienne)

.github/PULL_REQUEST_TEMPLATE.md

@@ -281,7 +281,7 @@ module.exports = {
       new TerserPlugin({
         parallel: true,
         terserOptions: {
-          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
+          // https://github.com/webpack/terser-webpack-plugin#terseroptions
         },
       }),
     ],

package.json

@@ -27,6 +27,7 @@ contributors:
   - d3lm
   - snitin315
   - Etheryen
+  - zowiebeha
 ---
 
 Webpack is used to compile JavaScript modules. Once [installed](/guides/installation), you can interact with webpack either from its [CLI](/api/cli) or [API](/api/node). If you're still new to webpack, please read through the [core concepts](/concepts) and [this comparison](/comparison) to learn why you might use it over the other tools that are out in the community.
@@ -200,6 +201,8 @@ Now, since we'll be bundling our scripts, we have to update our `index.html` fil
  </html>
 ```
 
+T> A couple other script loading strategies exist. Deferred loading is one such alternative to the above, where instead scripts are consolidated into the `<head>` and are given the `defer` attribute. This strategy downloads the external script resource(s) in parallel with document parsing, and will execute the scripts in order of document appearance after parsing has finished. This is in contrast to the above, in which the parser pauses to download and then execute the external resource syncronously. To learn more about this process, MDN has a nice [`reference guide`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script#async_and_defer).
+
 In this setup, `index.js` explicitly requires `lodash` to be present, and binds it as `_` (no global scope pollution). By stating what dependencies a module needs, webpack can use this information to build a dependency graph. It then uses the graph to generate an optimized bundle where scripts will be executed in the correct order.
 
 With that said, let's run `npx webpack`, which will take our script at `src/index.js` as the [entry point](/concepts/entry-points), and will generate `dist/main.js` as the [output](/concepts/output). The `npx` command, which ships with Node 8.2/npm 5.2.0 or higher, runs the webpack binary (`./node_modules/.bin/webpack`) of the webpack package we installed in the beginning: