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

.github/workflows/cancel.yml

@@ -0,0 +1,13 @@
+name: Cancel
+on:
+  workflow_run:
+    workflows: ["Ensure PR"]
+    types:
+      - requested
+jobs:
+  cancel:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: styfle/[email protected]
+      with:
+        workflow_id: ${{ github.event.workflow.id }}

.github/workflows/testing.yml

@@ -116,6 +116,7 @@ jobs:
       - name: Cypress run
         uses: cypress-io/github-action@v4
         with:
+          browser: chrome
           config-file: cypress.config.js
           build: yarn build
           start: yarn serve-dist

.markdownlint.json

@@ -3,13 +3,17 @@
   "MD002": false,
   "MD004": { "style": "dash" },
   "MD007": { "indent": 2 },
-  "MD013": { "line_length": 600 },
+  "MD013": { "line_length": 600, "code_blocks": false },
+  "MD024": {
+    "siblings_only": true
+  },
   "MD026": false,
   "MD029": { "style": "ordered" },
   "MD033": false,
   "MD034": false,
   "MD036": false,
   "MD041": false,
+  "MD053": false,
   "no-hard-tabs": false,
   "whitespace": false
 }

.markdownlintignore

@@ -0,0 +1 @@
+node_modules

package.json

@@ -44,8 +44,8 @@
     "lint": "run-s lint:*",
     "lint:js": "npm run lint-js .",
     "lint-js": "eslint --cache --cache-location .cache/.eslintcache",
-    "lint:markdown": "npm run lint-markdown *.md",
-    "lint-markdown": "markdownlint --config ./.markdownlint.json --ignore '.vale/**/*.md' --ignore '.github/**/*.md'",
+    "lint:markdown": "npm run lint-markdown '**/*.{md,mdx}'",
+    "lint-markdown": "markdownlint --config ./.markdownlint.json",
     "lint:prose": "vale --config='.vale.ini' src/content",
     "lint:links": "hyperlink -c 8 --root dist -r dist/index.html --canonicalroot https://webpack.js.org/ --internal --skip /plugins/extract-text-webpack-plugin/ --skip /printable --skip https:// --skip http:// --skip sw.js > internal-links.tap; cat internal-links.tap | tap-spot",
     "lint:heading": "textlint --fix src/content/*",
@@ -57,46 +57,46 @@
     "printable": "node ./src/scripts/concatenate-docs.mjs",
     "jest": "NODE_OPTIONS=--experimental-vm-modules jest --config=jest.config.mjs",
     "cypress:open": "cypress open",
-    "cypress:run": "cypress run",
+    "cypress:run": "cypress run --browser chrome",
     "prettier": "prettier --write '**/*.{js,json,jsx,css,scss,md,mdx}'",
     "prepare": "husky install && rimraf ./node_modules/.cache/webpack && yarn-deduplicate --strategy fewer"
   },
   "lint-staged": {
     "*.{js,jsx,md,mdx}": [
       "npm run lint-js"
     ],
-    "*.md": [
+    "*.{md,mdx}": [
       "npm run lint-markdown"
     ],
     "*.{js,jsx,css,scss,md,mdx,json}": [
       "prettier --write"
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.19.1",
+    "@babel/core": "^7.19.3",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-class-properties": "^7.17.12",
-    "@babel/preset-env": "^7.19.1",
+    "@babel/preset-env": "^7.19.4",
     "@babel/preset-react": "^7.18.6",
     "@mdx-js/loader": "^2.0.0-next.9",
     "@octokit/auth-action": "^2.0.1",
     "@octokit/rest": "^19.0.4",
     "@pmmmwh/react-refresh-webpack-plugin": "next",
-    "@svgr/webpack": "^6.3.1",
-    "autoprefixer": "^10.4.11",
+    "@svgr/webpack": "^6.4.0",
+    "autoprefixer": "^10.4.12",
     "babel-loader": "^8.2.5",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.1",
-    "css-minimizer-webpack-plugin": "^4.1.0",
-    "cypress": "^10.7.0",
+    "css-minimizer-webpack-plugin": "^4.2.1",
+    "cypress": "^10.9.0",
     "directory-tree": "^3.3.1",
     "directory-tree-webpack-plugin": "^1.0.3",
     "duplexer": "^0.1.1",
-    "eslint": "^8.23.1",
+    "eslint": "^8.25.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-mdx": "^2.0.4",
-    "eslint-plugin-react": "^7.31.8",
+    "eslint-plugin-mdx": "^2.0.5",
+    "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
     "front-matter": "^4.0.2",
     "github-slugger": "^1.4.0",
@@ -105,8 +105,8 @@
     "http-server": "^14.1.1",
     "husky": "^8.0.1",
     "hyperlink": "^5.0.4",
-    "jest": "^29.0.3",
-    "lightningcss": "^1.15.1",
+    "jest": "^29.1.2",
+    "lightningcss": "^1.16.0",
     "lint-staged": "^13.0.3",
     "lodash": "^4.17.21",
     "markdownlint": "^0.26.2",
@@ -117,7 +117,7 @@
     "modularscale-sass": "^3.0.3",
     "node-fetch": "^3.2.10",
     "npm-run-all": "^4.1.1",
-    "postcss": "^8.4.16",
+    "postcss": "^8.4.17",
     "postcss-loader": "^7.0.1",
     "prettier": "^2.7.1",
     "react-refresh": "^0.14.0",
@@ -131,8 +131,8 @@
     "remark-html": "^15.0.1",
     "remark-refractor": "montogeek/remark-refractor",
     "rimraf": "^3.0.2",
-    "sass": "^1.54.9",
-    "sass-loader": "^13.0.2",
+    "sass": "^1.55.0",
+    "sass-loader": "^13.1.0",
     "sirv-cli": "^2.0.2",
     "sitemap-static": "^0.4.2",
     "static-site-generator-webpack-plugin": "^3.4.1",
@@ -145,7 +145,7 @@
     "webpack": "^5.74.0",
     "webpack-bundle-analyzer": "^4.6.1",
     "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.11.0",
+    "webpack-dev-server": "^4.11.1",
     "webpack-merge": "^5.8.0",
     "workbox-webpack-plugin": "^6.5.4",
     "yarn-deduplicate": "^6.0.0"
@@ -157,8 +157,8 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet-async": "^1.3.0",
-    "react-router-dom": "^6.4.0",
-    "react-spring": "^9.5.4",
+    "react-router-dom": "^6.4.2",
+    "react-spring": "^9.5.5",
     "react-tiny-popover": "5",
     "react-use": "^17.4.0",
     "react-visibility-sensor": "^5.0.2",

src/content/api/loaders.mdx

@@ -648,7 +648,7 @@ module.exports = function (source) {
 
 这个模块将获取像下面的 bundle：
 
-```
+```text
 /***/ "./src/loader.js!./src/lib.js":
 /*!************************************!*\
   !*** ./src/loader.js!./src/lib.js ***!
@@ -725,7 +725,10 @@ module.exports = function (source) {
   if (STYLES_REGEXP.test(source)) {
     source = source.replace(STYLES_REGEXP, '');
     return `import ${JSON.stringify(
-      this.utils.contextify(this.context || this.rootContext, `${this.resource}.css!=!${getStylesLoader}!${this.remainingRequest}`)
+      this.utils.contextify(
+        this.context || this.rootContext,
+        `${this.resource}.css!=!${getStylesLoader}!${this.remainingRequest}`
+      )
     )};${source}`;
   }
   return source;

src/content/api/logging.mdx

@@ -61,7 +61,18 @@ module.exports = function (source) {
 };
 ```
 
+<<<<<<< HEAD
 ## Logger methods $#logger-methods$
+=======
+As you can see from the above `my-webpack-plugin.js` example, there're two types of logging methods,
+
+1. `compilation.getLogger`
+2. `compiler.getInfrastructureLogger`
+
+It's advised to use `compilation.getLogger` when plugin/logging is related to the compilation, and they will be stored within the stats. For logging that happens outside the compilation cycle, use `compiler.getInfrastructureLogger` instead.
+
+## Logger methods
+>>>>>>> 3bc80c4ca59b555beb7a0afca8dd1e878dc56d19
 
 - `logger.error(...)`：用于输出错误信息
 - `logger.warn(...)`：用于输出警告信息

src/content/api/module-variables.mdx

@@ -132,8 +132,14 @@ webpack 特定。[`module.hot`](#modulehot-webpack-specific) 的一个别名，[
   ) => webpack.Context;
   ```
 
+<<<<<<< HEAD
 - 可用版本：5.70.0+
 - 示例：
+=======
+- Available: 5.70.0+
+- Example:
+
+>>>>>>> 3bc80c4ca59b555beb7a0afca8dd1e878dc56d19
   ```js
   const contextRequire = import.meta.webpackContext('.', {
     recursive: false,
@@ -286,9 +292,16 @@ if (__webpack_is_included__('./module-a.js')) {
 
 运行时修改 base 的 URI。
 
+<<<<<<< HEAD
 - 类型：`string`
 - 可用：5.21.0+
 - 示例:
+=======
+- Type: `string`
+- Available: 5.21.0+
+- Example:
+
+>>>>>>> 3bc80c4ca59b555beb7a0afca8dd1e878dc56d19
   ```js
   __webpack_base_uri__ = 'https://example.com';
   ```

src/content/configuration/experiments.mdx

@@ -77,6 +77,7 @@ When enabled, webpack can build remote resources that begin with the `http(s):`
     A shortcut for [`experiments.buildHttp.allowedUris`](#experimentsbuildhttpalloweduris).
 
   - `HttpUriOptions`
+
     ```ts
     {
       allowedUris: (string|RegExp|(uri: string) => boolean)[],
@@ -137,6 +138,7 @@ Define the location for caching remote resources.
   - `string`
   - `false`
 - Example
+
   ```javascript
   // webpack.config.js
   module.exports = {
@@ -262,6 +264,7 @@ Compile entrypoints and dynamic `import`s only when they are in use. It can be u
 
 - Available: 5.17.0+
 - Example 1:
+
   ```js
   module.exports = {
     // …
@@ -270,6 +273,7 @@ Compile entrypoints and dynamic `import`s only when they are in use. It can be u
     },
   };
   ```
+
 - Example 2:
 
   ```js

src/content/configuration/index.mdx

@@ -18,9 +18,14 @@ contributors:
   - bigdawggi
   - anshumanv
   - textbook
+<<<<<<< HEAD
 translators:
   - dear-lizhihua
   - QC-L
+=======
+  - coly010
+  - chenxsan
+>>>>>>> 3bc80c4ca59b555beb7a0afca8dd1e878dc56d19
 ---
 
 webpack 开箱即用，可以无需使用任何配置文件。然而，webpack 会假定项目的入口起点为 `src/index.js`，然后会在 `dist/main.js` 输出结果，并且在生产环境开启压缩和优化。
@@ -45,6 +50,7 @@ T> 刚开始学习 webpack？请查看我们提供的指南，从 webpack 一些
 }
 ```
 
+<<<<<<< HEAD
 ## 选项 $#options$
 
 点击下面配置代码中每个选项的名称，跳转到详细的文档。还要注意，带有箭头的项目可以展开，以显示更多示例，在某些情况下可以看到高级配置。
@@ -1137,39 +1143,58 @@ module.exports = {
   </advancedBuild>
 }
 ```
+=======
+## Set up a new webpack project
+>>>>>>> 3bc80c4ca59b555beb7a0afca8dd1e878dc56d19
 
 W> 在应用 [插件默认值](/contribute/writing-a-plugin/#configuration-defaults) 之后，webpack 将应用配置默认值。
 
+<<<<<<< HEAD
 为了快速生成符合项目要求的 webpack 配置文件，在使用 [webpack-cli 的 `init` 命令](/api/cli/#init)时，会在创建配置文件之前会询问你几个问题。
+=======
+Webpack has a huge set of options which might be overwhelming to you, please take advantage of [webpack-cli's `init` command](/api/cli/#init) which could rapidly generate webpack configuration files for your project requirements, it will ask you a couple of questions before creating a configuration file.
+>>>>>>> 3bc80c4ca59b555beb7a0afca8dd1e878dc56d19
 
 ```bash
-npx webpack-cli init
+npx webpack init
 ```
 
+<<<<<<< HEAD
 如果尚未在项目或全局安装 `@webpack-cli/init`，npx 可能会提示你安装。根据你在配置生成过程中的选择，你也可能会安装额外的 package 到你的项目中。
+=======
+npx might prompt you to install `@webpack-cli/generators` if it is not yet installed in the project or globally. You might also get additional packages installed to your project depending on the choices you've made during the configuration generation.
+>>>>>>> 3bc80c4ca59b555beb7a0afca8dd1e878dc56d19
 
 ```bash
-npx webpack-cli init
+$ npx webpack init
 
-ℹ INFO For more information and a detailed description of each question, have a look at https://github.com/webpack/webpack-cli/blob/master/INIT.md
-ℹ INFO Alternatively, run `webpack(-cli) --help` for usage info.
+[webpack-cli] For using this command you need to install: '@webpack-cli/generators' package.
+[webpack-cli] Would you like to install '@webpack-cli/generators' package? (That will run 'npm install -D @webpack-cli/generators') (Y/n)
+devDependencies:
++ @webpack-cli/generators 2.5.0
+? Which of the following JS solutions do you want to use? ES6
+? Do you want to use webpack-dev-server? Yes
+? Do you want to simplify the creation of HTML files for your bundle? Yes
+? Do you want to add PWA support? No
+? Which of the following CSS solutions do you want to use? CSS only
+? Will you be using PostCSS in your project? Yes
+? Do you want to extract CSS for every file? Only for Production
+? Do you like to install prettier to format generated configuration? Yes
+? Pick a package manager: pnpm
+[webpack-cli] ℹ INFO  Initialising project...
 
-? Will your application have multiple bundles? No
-? Which module will be the first to enter the application? [default: ./src/index]
-? Which folder will your generated bundles be in? [default: dist]:
-? Will you be using ES2015? Yes
-? Will you use one of the below CSS solutions? No
-
-+ [email protected]
-+ [email protected]
-+ [email protected]
-+ @babel/[email protected]
-+ [email protected]
-+ @babel/[email protected]
-+ [email protected]
-added 124 packages from 39 contributors, updated 4 packages and audited 25221 packages in 7.463s
-found 0 vulnerabilities
-
-
-Congratulations! Your new webpack configuration file has been created!
+devDependencies:
++ @babel/core 7.19.3
++ @babel/preset-env 7.19.4
++ autoprefixer 10.4.12
++ babel-loader 8.2.5
++ css-loader 6.7.1
++ html-webpack-plugin 5.5.0
++ mini-css-extract-plugin 2.6.1
++ postcss 8.4.17
++ postcss-loader 7.0.1
++ prettier 2.7.1
++ style-loader 3.3.1
++ webpack-dev-server 4.11.1
+[webpack-cli] Project has been initialised with webpack!
 ```