Merge pull request #1656 from docschina/sync-73993d98

docs(en): merge webpack.js.org/master into webpack.js.org/cn @ 73993d9

Author: jacob-lcs

.github/workflows/deploy.yml

@@ -41,9 +41,8 @@ jobs:
       - run: yarn lint:links
 
       - name: Deploy
-        uses: JamesIves/github-pages-deploy-action@v4.2.5
+        uses: JamesIves/github-pages-deploy-action@v4.4.0
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
-          branch: gh-pages
           folder: dist
           clean: true

package.json

@@ -59,8 +59,7 @@
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
     "prettier": "prettier --write '**/*.{js,json,jsx,css,scss,md,mdx}'",
-    "prepare": "husky install",
-    "postinstall": "rimraf ./node_modules/.cache/webpack"
+    "prepare": "husky install && rimraf ./node_modules/.cache/webpack && yarn-deduplicate --strategy fewer"
   },
   "lint-staged": {
     "*.{js,jsx,md,mdx}": [
@@ -74,31 +73,31 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.18.9",
+    "@babel/core": "^7.18.13",
     "@babel/eslint-parser": "^7.18.9",
     "@babel/plugin-proposal-class-properties": "^7.17.12",
-    "@babel/preset-env": "^7.18.9",
+    "@babel/preset-env": "^7.18.10",
     "@babel/preset-react": "^7.18.6",
     "@mdx-js/loader": "^2.0.0-next.9",
-    "@octokit/auth-action": "^2.0.0",
-    "@octokit/rest": "^19.0.3",
-    "@parcel/css": "^1.12.0",
+    "@octokit/auth-action": "^2.0.1",
+    "@octokit/rest": "^19.0.4",
+    "@parcel/css": "^1.13.0",
     "@pmmmwh/react-refresh-webpack-plugin": "next",
     "@svgr/webpack": "^6.3.1",
-    "autoprefixer": "^10.4.7",
+    "autoprefixer": "^10.4.8",
     "babel-loader": "^8.2.5",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^4.0.0",
-    "cypress": "^10.3.1",
+    "cypress": "^10.6.0",
     "directory-tree": "^3.3.0",
     "directory-tree-webpack-plugin": "^1.0.3",
     "duplexer": "^0.1.1",
-    "eslint": "^8.20.0",
+    "eslint": "^8.23.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-mdx": "^2.0.1",
-    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-mdx": "^2.0.2",
+    "eslint-plugin-react": "^7.31.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "front-matter": "^4.0.2",
     "github-slugger": "^1.4.0",
@@ -107,18 +106,18 @@
     "http-server": "^14.1.1",
     "husky": "^8.0.1",
     "hyperlink": "^5.0.4",
-    "jest": "^28.1.3",
+    "jest": "^29.0.1",
     "lint-staged": "^13.0.3",
     "lodash": "^4.17.21",
-    "markdownlint": "^0.26.0",
-    "markdownlint-cli": "^0.32.0",
+    "markdownlint": "^0.26.2",
+    "markdownlint-cli": "^0.32.2",
     "mdast-util-to-string": "^3.1.0",
     "mini-css-extract-plugin": "^2.6.1",
     "mkdirp": "^1.0.4",
     "modularscale-sass": "^3.0.3",
-    "node-fetch": "^3.2.9",
+    "node-fetch": "^3.2.10",
     "npm-run-all": "^4.1.1",
-    "postcss": "^8.4.14",
+    "postcss": "^8.4.16",
     "postcss-loader": "^7.0.1",
     "prettier": "^2.7.1",
     "react-refresh": "^0.14.0",
@@ -132,23 +131,24 @@
     "remark-html": "^15.0.1",
     "remark-refractor": "montogeek/remark-refractor",
     "rimraf": "^3.0.2",
-    "sass": "^1.53.0",
+    "sass": "^1.54.5",
     "sass-loader": "^13.0.2",
     "sirv-cli": "^2.0.2",
     "sitemap-static": "^0.4.2",
     "static-site-generator-webpack-plugin": "^3.4.1",
     "style-loader": "^3.3.1",
-    "tailwindcss": "^3.1.6",
+    "tailwindcss": "^3.1.8",
     "tap-spot": "^1.1.2",
     "textlint": "^11.8.2",
     "textlint-rule-heading": "^1.0.10",
-    "unist-util-visit": "^4.1.0",
-    "webpack": "^5.73.0",
-    "webpack-bundle-analyzer": "^4.5.0",
+    "unist-util-visit": "^4.1.1",
+    "webpack": "^5.74.0",
+    "webpack-bundle-analyzer": "^4.6.1",
     "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.9.3",
+    "webpack-dev-server": "^4.10.1",
     "webpack-merge": "^5.8.0",
-    "workbox-webpack-plugin": "^6.5.3"
+    "workbox-webpack-plugin": "^6.5.4",
+    "yarn-deduplicate": "^6.0.0"
   },
   "dependencies": {
     "@docsearch/react": "^3.0.0-alpha.50",
@@ -158,13 +158,13 @@
     "react-dom": "^17.0.2",
     "react-helmet-async": "^1.3.0",
     "react-router-dom": "^6.3.0",
-    "react-spring": "^9.5.1",
+    "react-spring": "^9.5.2",
     "react-tiny-popover": "5",
     "react-use": "^17.4.0",
     "react-visibility-sensor": "^5.0.2",
     "webpack-pwa-manifest": "^4.3.0",
     "webpack.vote": "https://github.com/webpack/voting-app.git",
-    "workbox-window": "^6.5.3"
+    "workbox-window": "^6.5.4"
   },
   "resolutions": {
     "sitemap-static/minimist": "1.2.5",

src/components/Configuration/Configuration.scss

@@ -2,6 +2,11 @@
   overflow: visible;
   border-radius: 4px;
   box-shadow: -1px 1px 10px 0 rgba(255, 255, 255, 0.44);
+
+  pre.inline {
+    padding: 0;
+    display: block;
+  }
 }
 
 .shadow > .markdown {

src/content/api/loaders.mdx

@@ -719,7 +719,7 @@ console.log('yep');
 **extract-style-loader/index.js**
 
 ```javascript
-const getStylesLoader = require.resolve('./getStyle');
+const getStylesLoader = require.resolve('./getStyles');
 
 module.exports = function (source) {
   if (STYLES_REGEXP.test(source)) {
@@ -736,7 +736,7 @@ module.exports = function (source) {
 
 ```javascript
 module.exports = function (source) {
-  const match = STYLES_REGEXP.match(source);
+  const match = source.match(STYLES_REGEXP);
   return match[0];
 };
 ```

src/content/api/plugins.mdx

@@ -9,6 +9,7 @@ contributors:
   - byzyk
   - EugeneHlushko
   - wizardofhogwarts
+  - snitin315
 translators:
   - chenzesam
   - QC-L
@@ -90,18 +91,52 @@ compiler.hooks.run.tapPromise(
 
 ## 自定义钩子 $#custom-hooks$
 
-为了便于其他插件的编译过程中可以 `tap` 到，则需要创建一个新的 hook，
-我们只需要简单的从 `tapable` 中 `require` 所需的 hook 类，并创建：
+为了便于其他插件的编译过程中可以 `tap` 到，
+你可以这样做：
 
-```js
-const SyncHook = require('tapable').SyncHook;
+1. Create a module-scope `WeakMap` for compilation hooks:
 
-if (compiler.hooks.myCustomHook) throw new Error('已存在该钩子');
-compiler.hooks.myCustomHook = new SyncHook(['a', 'b', 'c']);
+    ```ts
+    const compilationHooks = new WeakMap<Compilation, MyHooks>();
 
-// 在你想要触发钩子的位置/时机下调用……
-compiler.hooks.myCustomHook.call(a, b, c);
-```
+    interface MyHooks {
+      custom: SyncHook<[number, string]>;
+    }
+    ```
+
+2. 在插件中创建一个静态方法：
+
+    ```ts
+    static getCompilationHooks(compilation: Compilation) : MyHooks {
+      let hooks = compilationHooks.get(compilation);
+      if(hooks === undefined) {
+        compilationHooks.set(compilation, hooks = {
+          custom: new SyncHook()
+        });
+      }
+      return hooks;
+    }
+    ```
+
+3. 像下面这样在你的插件中调用钩子函数：
+
+    ```ts
+    const hooks = MyPlugin.getCompilationHooks(compilation);
+
+    hooks.custom.call(1, 'hello');
+    ```
+
+4. 其他插件也可以访问你的自定义钩子函数：
+
+    ```ts
+    import MyPlugin from 'my-plugin';
+
+    const hooks = MyPlugin.getCompilationHooks(compilation);
+
+    hooks.custom.tap('OtherPlugin', (n, s) => {
+      // magic
+    });
+    ```
 
 再次声明，
 查看 `tapable` [文档](https://github.com/webpack/tapable) 来了解更多不同的钩子类(hook class)，以及它们是如何工作的。

src/content/blog/2020-10-10-webpack-5-release.mdx

@@ -365,7 +365,7 @@ export function test() {
 
 当设置`"sideEffects": false`时，可以省略更多的模块。在这个例子中，当 `test` 导出未被使用时，`./something` 将被省略。
 
-要获得未使用的导出信息，需要使用 `optimization.unusedExports`。要删除无副作用的模块，需要使用`optimization.sideEffects`。
+要获得未使用的导出信息，需要使用 `optimization.usedExports`。要删除无副作用的模块，需要使用`optimization.sideEffects`。
 
 可以分析以下标记。
 

src/content/configuration/dev-server.mdx

@@ -75,7 +75,7 @@ W> 请注意，当[导出多个配置对象](/configuration/configuration-types/
 
 T> 如果你碰到了问题，请将路由导航至 `/webpack-dev-server` 将会为你展示服务文件的位置。例如： `http://localhost:9000/webpack-dev-server`。
 
-T> 如果你需要要手动重新编译 `bundle`，将路由导航至 `/invalidate` 使当前编译的 `bundle` [无效](/api/node/#invalidate-watching)，并通过 [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware#invalidate) 为你重新编译。根据你的配置，URL 可能看起来像 `http://localhost:9000/invalidate`。
+T> 如果你需要要手动重新编译 `bundle`，将路由导航至 `/webpack-dev-server/invalidate` 使当前编译的 `bundle` [无效](/api/node/#invalidate-watching)，并通过 [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware#invalidate) 为你重新编译。根据你的配置，URL 可能看起来像 `http://localhost:9000/webpack-dev-server/invalidate`。
 
 T> 当启动本地服务的时候 HTML 模板是必须提供的，通常是 `index.html`。确保将脚本引用添加到 HTML 中，webpack-dev-server 不会自动注入它们。
 
@@ -1584,7 +1584,7 @@ module.exports = {
       // 如果你想在所有其他中间件之前运行一个中间件或者当你从 `onBeforeSetupMiddleware` 配置项迁移时，
       // 可以使用 `unshift` 方法
       middlewares.unshift({
-        name: 'fist-in-array',
+        name: 'first-in-array',
         // `path` 是可选的
         path: '/foo/path',
         middleware: (req, res) => {