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

package.json

@@ -73,54 +73,54 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.17.9",
+    "@babel/core": "^7.18.0",
     "@babel/eslint-parser": "^7.17.0",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
+    "@babel/plugin-proposal-class-properties": "^7.17.12",
+    "@babel/preset-env": "^7.18.0",
+    "@babel/preset-react": "^7.17.12",
     "@mdx-js/loader": "^2.0.0-next.9",
     "@octokit/auth-action": "^1.3.3",
     "@octokit/rest": "^18.12.0",
-    "@parcel/css": "^1.8.1",
+    "@parcel/css": "^1.8.3",
     "@pmmmwh/react-refresh-webpack-plugin": "next",
     "@svgr/webpack": "^6.2.1",
-    "autoprefixer": "^10.4.4",
-    "babel-loader": "^8.2.4",
-    "copy-webpack-plugin": "^10.2.4",
+    "autoprefixer": "^10.4.7",
+    "babel-loader": "^8.2.5",
+    "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.1",
-    "css-minimizer-webpack-plugin": "^3.4.1",
-    "cypress": "^9.5.4",
+    "css-minimizer-webpack-plugin": "^4.0.0",
+    "cypress": "^9.6.1",
     "directory-tree": "^3.2.2",
     "directory-tree-webpack-plugin": "^1.0.3",
     "duplexer": "^0.1.1",
-    "eslint": "^8.13.0",
+    "eslint": "^8.15.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-mdx": "^1.17.0",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.4.0",
+    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
     "front-matter": "^4.0.2",
     "github-slugger": "^1.4.0",
     "html-loader": "^2.1.2",
     "html-webpack-plugin": "^5.5.0",
     "http-server": "^14.1.0",
-    "husky": "^7.0.4",
+    "husky": "^8.0.1",
     "hyperlink": "^5.0.4",
-    "jest": "^27.5.1",
-    "lint-staged": "^12.3.8",
+    "jest": "^28.1.0",
+    "lint-staged": "^12.4.1",
     "lodash": "^4.17.21",
     "markdownlint": "^0.25.1",
     "markdownlint-cli": "^0.31.1",
     "mdast-util-to-string": "^3.1.0",
     "mini-css-extract-plugin": "^2.6.0",
     "mkdirp": "^1.0.4",
     "modularscale-sass": "^3.0.3",
-    "node-fetch": "^3.2.3",
+    "node-fetch": "^3.2.4",
     "npm-run-all": "^4.1.1",
-    "postcss": "^8.4.12",
-    "postcss-loader": "^6.2.1",
+    "postcss": "^8.4.14",
+    "postcss-loader": "^7.0.0",
     "prettier": "^2.6.2",
-    "react-refresh": "^0.12.0",
+    "react-refresh": "^0.13.0",
     "redirect-webpack-plugin": "^1.0.0",
     "remark": "^14.0.2",
     "remark-autolink-headings": "7.0.1",
@@ -131,22 +131,26 @@
     "remark-html": "^15.0.1",
     "remark-refractor": "montogeek/remark-refractor",
     "rimraf": "^3.0.2",
-    "sass": "^1.50.1",
-    "sass-loader": "^12.6.0",
+    "sass": "^1.52.0",
+    "sass-loader": "^13.0.0",
     "sirv-cli": "^2.0.2",
     "sitemap-static": "^0.4.2",
     "start-server-and-test": "^1.14.0",
     "static-site-generator-webpack-plugin": "^3.4.1",
     "style-loader": "^3.3.1",
     "tailwindcss": "^3.0.24",
+<<<<<<< HEAD
     "tap-spot": "^1.1.1",
     "textlint": "^11.8.2",
     "textlint-rule-heading": "^1.0.10",
+=======
+    "tap-spot": "^1.1.2",
+>>>>>>> f15423e367b14375a59681ca78d2c5e23e68e312
     "unist-util-visit": "^4.1.0",
-    "webpack": "^5.72.0",
+    "webpack": "^5.72.1",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.8.1",
+    "webpack-dev-server": "^4.9.0",
     "webpack-merge": "^5.8.0",
     "workbox-webpack-plugin": "^6.5.3"
   },
@@ -158,9 +162,9 @@
     "react-dom": "^17.0.2",
     "react-helmet-async": "^1.3.0",
     "react-router-dom": "^6.3.0",
-    "react-spring": "^9.4.4",
+    "react-spring": "^9.4.5",
     "react-tiny-popover": "5",
-    "react-use": "^17.3.2",
+    "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",

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

@@ -33,7 +33,7 @@ if (module.hot) {
 // or
 if (import.meta.webpackHot) {
   import.meta.webpackHot.accept('./library.js', function () {
-    // Do something with the updated library modue…
+    // Do something with the updated library module…
   });
 }
 ```

src/content/api/loaders.mdx

@@ -213,7 +213,19 @@ addDependency(file: string)
 dependency(file: string) // shortcut
 ```
 
+<<<<<<< HEAD
 加入一个文件作为产生 loader 结果的依赖，使它们的任何变化可以被监听到。例如，[`sass-loader`](https://github.com/webpack-contrib/sass-loader), [`less-loader`](https://github.com/webpack-contrib/less-loader) 就使用了这个技巧，当它发现无论何时导入的 `css` 文件发生变化时就会重新编译。
+=======
+Add an existing file as a dependency of the loader result in order to make them watchable. For example, [`sass-loader`](https://github.com/webpack-contrib/sass-loader), [`less-loader`](https://github.com/webpack-contrib/less-loader) uses this to recompile whenever any imported `css` file changes.
+
+### this.addMissingDependency
+
+```typescript
+addMissingDependency(file: string)
+```
+
+Add a non-existing file as a dependency of the loader result in order to make them watchable. Similar to `addDependency`, but handles the creation of files during compilation before watchers are attached correctly.
+>>>>>>> f15423e367b14375a59681ca78d2c5e23e68e312
 
 ### this.async $#thisasync$
 

src/content/concepts/module-resolution.mdx

@@ -45,7 +45,11 @@ import '../src/file1';
 import './file2';
 ```
 
+<<<<<<< HEAD
 在这种情况下，使用 `import` 或 `require` 的资源文件所处的目录，被认为是上下文目录。在 `import/require` 中给定的相对路径，会拼接此上下文路径，来生成模块的绝对路径。
+=======
+In this case, the directory of the source file where the `import` or `require` occurs is taken to be the context directory. The relative path specified in the `import/require` is joined to this context path to produce the absolute path to the module.
+>>>>>>> f15423e367b14375a59681ca78d2c5e23e68e312
 
 ### 模块路径 $#module-paths$
 

src/content/configuration/module.mdx

@@ -206,6 +206,25 @@ const x = require(/* webpackIgnore: true */ 'x');
   };
   ```
 
+#### module.parser.javascript.importMeta
+
+Enable or disable evaluating `import.meta`.
+
+- Type: `boolean = true`
+- Available: 5.68.0+
+- Example:
+  ```js
+  module.exports = {
+    module: {
+      parser: {
+        javascript: {
+          importMeta: false,
+        },
+      },
+    },
+  };
+  ```
+
 #### module.parser.javascript.importMetaContext
 
 启用/禁用 [`import.meta.webpackContext`](/api/module-variables/#importmetawebpackcontext) 分析。

src/content/guides/asset-modules.mdx

@@ -113,7 +113,11 @@ import mainImage from './images/main.png';
 img.src = mainImage; // '/dist/151cfcfa1bd74779aadb.png'
 ```
 
+<<<<<<< HEAD
 所有 `.png` 文件都将被发送到输出目录，并且其路径将被注入到 bundle 中。
+=======
+All `.png` files will be emitted to the output directory and their paths will be injected into the bundles, besides, you can customize [`outputPath`](/configuration/module/#rulegeneratoroutputpath) and [`publicPath`](/configuration/module/#rulegeneratorpublicpath) for them.
+>>>>>>> f15423e367b14375a59681ca78d2c5e23e68e312
 
 ### 自定义输出文件名 $#custom-output-filename$
 

src/content/guides/code-splitting.mdx

@@ -430,7 +430,11 @@ import(/* webpackPreload: true */ 'ChartingLibrary');
 
 T> 不正确地使用 `webpackPreload` 会有损性能，请谨慎使用。
 
+<<<<<<< HEAD
 有时你需要自己控制预加载。例如，任何动态导入的预加载都可以通过异步脚本完成。这在流式服务器端渲染的情况下很有用。
+=======
+Sometimes you need to have your own control over preload. For example, preload of any dynamic import can be done via async script. This can be useful in case of streaming server side rendering.
+>>>>>>> f15423e367b14375a59681ca78d2c5e23e68e312
 
 ```js
 const lazyComp = () =>

src/content/plugins/split-chunks-plugin.mdx

@@ -254,6 +254,8 @@ T> 设置 `maxSize` 的值会同时设置 `maxAsyncSize` 和 `maxInitialSize` 
 
 如果 `splitChunks.name` 与 [entry point](/configuration/entry-context/#entry) 名称匹配，entry point 将被删除。
 
+T> `splitChunks.cacheGroups.{cacheGroup}.name` can be used to move modules into a chunk that is a parent of the source chunk. For example, use `name: "entry-name"` to move modules into the `entry-name` chunk. You can also use on demand named chunks, but you must be careful that the selected modules are only used under this chunk.
+
 **main.js**
 
 ```js