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

.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

package.json

@@ -57,7 +57,7 @@
     "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"
   },
@@ -73,30 +73,30 @@
     ]
   },
   "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.9",
     "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/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
+>>>>>>> 98f254cd5829db3895672cb248044369ddc07294
 
 - `logger.error(...)`：用于输出错误信息
 - `logger.warn(...)`：用于输出警告信息

src/content/configuration/index.mdx

@@ -18,9 +18,14 @@ contributors:
   - bigdawggi
   - anshumanv
   - textbook
+<<<<<<< HEAD
 translators:
   - dear-lizhihua
   - QC-L
+=======
+  - coly010
+  - chenxsan
+>>>>>>> 98f254cd5829db3895672cb248044369ddc07294
 ---
 
 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
+>>>>>>> 98f254cd5829db3895672cb248044369ddc07294
 
 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.
+>>>>>>> 98f254cd5829db3895672cb248044369ddc07294
 
 ```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.
+>>>>>>> 98f254cd5829db3895672cb248044369ddc07294
 
 ```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!
 ```

src/content/configuration/watch.mdx

@@ -11,10 +11,14 @@ contributors:
   - Neob91
   - Loonride
   - snitin315
+<<<<<<< HEAD
 translators:
   - lcxfs1991
   - QC-L
   - jacob-lcs
+=======
+  - chenxsan
+>>>>>>> 98f254cd5829db3895672cb248044369ddc07294
 ---
 
 Webpack 可以监听文件变化，当它们修改后会重新编译。这个页面介绍了如何启用这个功能，以及当 watch 无法正常运行的时候你可以做的一些调整。
@@ -132,7 +136,11 @@ T> 如果你使用 `require.context`，webpack 会监听你的整个目录。你
 
 `boolean = false` `number`
 
+<<<<<<< HEAD
 通过传递 `true` 开启 [polling](https://whatis.techtarget.com/definition/polling)，或者指定毫秒为单位进行轮询。
+=======
+Turn on [polling](<https://en.wikipedia.org/wiki/Polling_(computer_science)>) by passing `true` which would set the default poll interval to [`5007`](https://github.com/webpack/watchpack/blob/a54bcdb95759558ca5a9fc2819c4d71b771c162f/lib/DirectoryWatcher.js#L79), or specifying a poll interval in milliseconds:
+>>>>>>> 98f254cd5829db3895672cb248044369ddc07294
 
 **webpack.config.js**
 

src/content/guides/asset-modules.mdx

@@ -476,3 +476,24 @@ module: {
     ]
   },
 ```
+
+## Disable emitting assets
+
+For use cases like Server side rendering, you might want to disable emitting assets, which is feasible with [`emit`](/configuration/module/#rulegeneratoremit) option under `Rule.generator`:
+
+```js
+module.exports = {
+  // …
+  module: {
+    rules: [
+      {
+        test: /\.png$/i,
+        type: 'asset/resource',
+        generator: {
+          emit: false,
+        },
+      },
+    ],
+  },
+};
+```

src/content/guides/web-workers.mdx

@@ -17,7 +17,13 @@ new Worker(new URL('./worker.js', import.meta.url));
 
 选择这种语法是为了实现不使用 bundler 就可以运行代码，它也可以在浏览器中的原生 ECMAScript 模块中使用。
 
+<<<<<<< HEAD
 ## 示例 $#example$
+=======
+Note that while the [`Worker` API](https://developer.mozilla.org/en-US/docs/Web/API/Worker/Worker) suggests that `Worker` constructor would accept a string representing the URL of the script, in webpack 5 you can only use `URL` instead.
+
+## Example
+>>>>>>> 98f254cd5829db3895672cb248044369ddc07294
 
 **src/index.js**
 

src/styles/dark.scss

@@ -17,6 +17,7 @@ body {
   code,
   tt {
     text-shadow: none;
+    background-color: transparentize(getColor(fiord), 0.55);
   }
   blockquote {
     border-left-color: #343434;
@@ -53,6 +54,9 @@ body {
   }
   pre {
     background-color: #131b1f;
+    code {
+      background: transparent;
+    }
   }
   a code {
     color: #69a8ee;