docs(en): merge webpack.js.org/master into webpack.js.org/cn @ 04af2009

.eslintrc.js

@@ -19,6 +19,12 @@ module.exports = {
     'react/react-in-jsx-scope': 'off', // ditto
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'warn',
+    'react/no-unknown-property': [
+      'error',
+      {
+        ignore: ['watch', 'align'],
+      },
+    ],
   },
   settings: {
     react: {

.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

.github/workflows/testing.yml

@@ -4,6 +4,25 @@ on:
   pull_request:
 
 jobs:
+  unitTest:
+    name: Unit Test
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node-version: [16.x]
+    runs-on: ${{ matrix.os }}
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: yarn
+
+      - run: yarn --frozen-lockfile
+      - run: yarn jest
+
   lint:
     name: Lint
     strategy:

package.json

@@ -21,7 +21,7 @@
     "url": "https://github.com/webpack/webpack.js.org/issues"
   },
   "engines": {
-    "node": ">=14"
+    "node": "^14.20.0 || ^16.15.0 || >=18.0.0"
   },
   "scripts": {
     "clean-dist": "rimraf ./dist",
@@ -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.19.0",
     "@babel/eslint-parser": "^7.18.9",
     "@babel/plugin-proposal-class-properties": "^7.17.12",
-    "@babel/preset-env": "^7.18.9",
+    "@babel/preset-env": "^7.19.0",
     "@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.14.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",
-    "directory-tree": "^3.3.0",
+    "cypress": "^10.7.0",
+    "directory-tree": "^3.3.1",
     "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.4",
+    "eslint-plugin-react": "^7.31.8",
     "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.2",
     "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,30 @@
     "remark-html": "^15.0.1",
     "remark-refractor": "montogeek/remark-refractor",
     "rimraf": "^3.0.2",
-    "sass": "^1.53.0",
+    "sass": "^1.54.9",
     "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",
+<<<<<<< HEAD
     "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",
+>>>>>>> 04af2009f52024d956cf5c5d227e5d56f0ad7c63
     "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.9.3",
+    "webpack-dev-server": "^4.11.0",
     "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 +164,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,9 +9,13 @@ contributors:
   - byzyk
   - EugeneHlushko
   - wizardofhogwarts
+<<<<<<< HEAD
 translators:
   - chenzesam
   - QC-L
+=======
+  - snitin315
+>>>>>>> 04af2009f52024d956cf5c5d227e5d56f0ad7c63
 ---
 
 插件是 webpack 生态的关键部分，
@@ -90,18 +94,66 @@ compiler.hooks.run.tapPromise(
 
 ## 自定义钩子 $#custom-hooks$
 
+<<<<<<< HEAD
 为了便于其他插件的编译过程中可以 `tap` 到，则需要创建一个新的 hook，
 我们只需要简单的从 `tapable` 中 `require` 所需的 hook 类，并创建：
+=======
+In order to offer a custom hook to the compilation for other plugins to `tap` into,
+you need to do the following:
+>>>>>>> 04af2009f52024d956cf5c5d227e5d56f0ad7c63
 
-```js
-const SyncHook = require('tapable').SyncHook;
+1. Create a module-scope `WeakMap` for compilation hooks:
 
+<<<<<<< HEAD
 if (compiler.hooks.myCustomHook) throw new Error('已存在该钩子');
 compiler.hooks.myCustomHook = new SyncHook(['a', 'b', 'c']);
 
 // 在你想要触发钩子的位置/时机下调用……
 compiler.hooks.myCustomHook.call(a, b, c);
 ```
+=======
+    ```ts
+    const compilationHooks = new WeakMap<Compilation, MyHooks>();
+
+    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;
+    }
+    ```
+
+3. Call hooks like below in your plugin:
+
+    ```ts
+    const hooks = MyPlugin.getCompilationHooks(compilation);
+
+    hooks.custom.call(1, 'hello');
+    ```
+
+4. Other plugins can access your custom hooks too:
+
+    ```ts
+    import MyPlugin from 'my-plugin';
+
+    const hooks = MyPlugin.getCompilationHooks(compilation);
+
+    hooks.custom.tap('OtherPlugin', (n, s) => {
+      // magic
+    });
+    ```
+>>>>>>> 04af2009f52024d956cf5c5d227e5d56f0ad7c63
 
 再次声明，
 查看 `tapable` [文档](https://github.com/webpack/tapable) 来了解更多不同的钩子类(hook class)，以及它们是如何工作的。

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

@@ -365,7 +365,11 @@ export function test() {
 
 当设置`"sideEffects": false`时，可以省略更多的模块。在这个例子中，当 `test` 导出未被使用时，`./something` 将被省略。
 
+<<<<<<< HEAD
 要获得未使用的导出信息，需要使用 `optimization.unusedExports`。要删除无副作用的模块，需要使用`optimization.sideEffects`。
+=======
+To get the information about unused exports `optimization.usedExports` is required. To remove side-effect-free modules `optimization.sideEffects` is required.
+>>>>>>> 04af2009f52024d956cf5c5d227e5d56f0ad7c63
 
 可以分析以下标记。
 

src/content/configuration/dev-server.mdx

@@ -75,7 +75,11 @@ W> 请注意，当[导出多个配置对象](/configuration/configuration-types/
 
 T> 如果你碰到了问题，请将路由导航至 `/webpack-dev-server` 将会为你展示服务文件的位置。例如： `http://localhost:9000/webpack-dev-server`。
 
+<<<<<<< HEAD
 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> If you want to manually recompile the bundle, navigating to the `/webpack-dev-server/invalidate` route will [invalidate](/api/node/#invalidate-watching) the current compilation of the bundle and recompile it for you via [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware#invalidate). Depending on your configuration, the URL may look like `http://localhost:9000/webpack-dev-server/invalidate`.
+>>>>>>> 04af2009f52024d956cf5c5d227e5d56f0ad7c63
 
 T> 当启动本地服务的时候 HTML 模板是必须提供的，通常是 `index.html`。确保将脚本引用添加到 HTML 中，webpack-dev-server 不会自动注入它们。
 
@@ -1584,8 +1588,13 @@ module.exports = {
       // 如果你想在所有其他中间件之前运行一个中间件或者当你从 `onBeforeSetupMiddleware` 配置项迁移时，
       // 可以使用 `unshift` 方法
       middlewares.unshift({
+<<<<<<< HEAD
         name: 'fist-in-array',
         // `path` 是可选的
+=======
+        name: 'first-in-array',
+        // `path` is optional
+>>>>>>> 04af2009f52024d956cf5c5d227e5d56f0ad7c63
         path: '/foo/path',
         middleware: (req, res) => {
           res.send('Foo!');