Merge pull request #1624 from docschina/sync-2b1aaf87

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

Author: jacob-lcs

.github/workflows/deploy.yml

@@ -23,6 +23,16 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: yarn
 
+      - name: Enable webpack persistent caching
+        uses: actions/cache@v3
+        id: build-webpack-persistent-cache
+        with:
+          path: node_modules/.cache
+          key: build-${{ hashFiles('**/webpack.*.mjs') }}-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |-
+             build-${{ hashFiles('**/webpack.*.mjs') }}-${{ hashFiles('**/yarn.lock') }}
+             build-${{ hashFiles('**/webpack.*.mjs') }}-
+
       - run: yarn --frozen-lockfile
       - name: Build site
         run: yarn build

.github/workflows/testing.yml

@@ -58,6 +58,16 @@ jobs:
 
       - run: yarn
 
+      - name: Enable webpack persistent caching
+        uses: actions/cache@v3
+        id: build-webpack-persistent-cache
+        with:
+          path: node_modules/.cache
+          key: build-${{ hashFiles('**/webpack.*.mjs') }}-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |-
+            build-${{ hashFiles('**/webpack.*.mjs') }}-${{ hashFiles('**/yarn.lock') }}
+            build-${{ hashFiles('**/webpack.*.mjs') }}-
+
       - name: Build site
         run: yarn build
         env:
@@ -74,6 +84,16 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
+      - name: Enable webpack persistent caching
+        uses: actions/cache@v3
+        id: build-webpack-persistent-cache
+        with:
+          path: node_modules/.cache
+          key: build-${{ hashFiles('**/webpack.*.mjs') }}-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |-
+            build-${{ hashFiles('**/webpack.*.mjs') }}-${{ hashFiles('**/yarn.lock') }}
+            build-${{ hashFiles('**/webpack.*.mjs') }}-
+
       - name: Cypress run
         uses: cypress-io/github-action@v4
         with:

README.md

@@ -37,7 +37,6 @@ $ yarn start
 
 内容在 [Creative Commons BY 4.0](https://creativecommons.org/licenses/by/4.0/) 许可下可用。
 
-[webpack5-milestone-url]: https://github.com/webpack/webpack.js.org/issues?q=is%3Aopen+is%3Aissue+milestone%3A%22webpack+5%22
 [build-status]: https://github.com/webpack/webpack.js.org/workflows/Deploy/badge.svg
 [build-status-url]: https://github.com/webpack/webpack.js.org/actions
 [chat]: https://badges.gitter.im/webpack/webpack.svg

package.json

@@ -59,7 +59,8 @@
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
     "prettier": "prettier --write '**/*.{js,json,jsx,css,scss,md,mdx}'",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "postinstall": "rimraf ./node_modules/.cache/webpack"
   },
   "lint-staged": {
     "*.{js,jsx,md,mdx}": [
@@ -73,27 +74,27 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.18.6",
-    "@babel/eslint-parser": "^7.18.2",
+    "@babel/core": "^7.18.9",
+    "@babel/eslint-parser": "^7.18.9",
     "@babel/plugin-proposal-class-properties": "^7.17.12",
-    "@babel/preset-env": "^7.18.6",
+    "@babel/preset-env": "^7.18.9",
     "@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",
     "@pmmmwh/react-refresh-webpack-plugin": "next",
-    "@svgr/webpack": "^6.2.1",
+    "@svgr/webpack": "^6.3.1",
     "autoprefixer": "^10.4.7",
     "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.0",
+    "cypress": "^10.3.1",
     "directory-tree": "^3.3.0",
     "directory-tree-webpack-plugin": "^1.0.3",
     "duplexer": "^0.1.1",
-    "eslint": "^8.19.0",
+    "eslint": "^8.20.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-mdx": "^2.0.1",
@@ -110,12 +111,12 @@
     "lint-staged": "^13.0.3",
     "lodash": "^4.17.21",
     "markdownlint": "^0.26.0",
-    "markdownlint-cli": "^0.31.1",
+    "markdownlint-cli": "^0.32.0",
     "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.8",
+    "node-fetch": "^3.2.9",
     "npm-run-all": "^4.1.1",
     "postcss": "^8.4.14",
     "postcss-loader": "^7.0.1",
@@ -157,7 +158,7 @@
     "react-dom": "^17.0.2",
     "react-helmet-async": "^1.3.0",
     "react-router-dom": "^6.3.0",
-    "react-spring": "^9.5.0",
+    "react-spring": "^9.5.1",
     "react-tiny-popover": "5",
     "react-use": "^17.4.0",
     "react-visibility-sensor": "^5.0.2",

src/content/guides/code-splitting.mdx

@@ -318,7 +318,7 @@ webpack-demo
 -
 -function component() {
 +function getComponent() {
-   const element = document.createElement('div');
+-  const element = document.createElement('div');
 
 -  // Lodash, now imported by this script
 -  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
@@ -363,7 +363,7 @@ webpack 5.4.0 compiled successfully in 268 ms
 ```diff
 -function getComponent() {
 +async function getComponent() {
-   const element = document.createElement('div');
++  const element = document.createElement('div');
 +  const { default: _ } = await import('lodash');
 
 -  return import('lodash')

src/content/plugins/module-concatenation-plugin.mdx

@@ -84,14 +84,12 @@ function tryToAdd(group, module) {
 
 ### Debugging Optimization Bailouts $#debugging-optimization-bailouts$
 
-When using the webpack CLI, the `--display-optimization-bailout` flag will display bailout reasons. When using the webpack config, add the following to the `stats` object:
+When using the webpack CLI, the `--stats-optimization-bailout` flag will display bailout reasons. When using the webpack config, add the following to the `stats` object:
 
 ```js
 module.exports = {
   //...
   stats: {
-    // Examine all modules
-    maxModules: Infinity,
     // Display bailout reasons
     optimizationBailout: true,
   },

webpack.common.mjs

@@ -55,7 +55,7 @@ export default ({ ssg = false }) => ({
     buildDependencies: {
       config: [__filename],
     },
-    cacheDirectory: path.resolve(__dirname, '.cache/webpack'),
+    cacheDirectory: path.resolve(__dirname, 'node_modules/.cache/webpack')
   },
   resolve: {
     extensions: ['.js', '.jsx', '.scss'],

webpack.prod.mjs

@@ -15,11 +15,6 @@ import ProdAssetsManifest from './src/ProdAssetsManifest.mjs';
 export default (env) =>
   merge(common(env), {
     mode: 'production',
-    cache: {
-      buildDependencies: {
-        config: [__filename],
-      },
-    },
     entry: {
       index: {
         import: './index.jsx',

webpack.ssg.mjs

@@ -24,11 +24,6 @@ export default (env) =>
     name: 'ssg',
     mode: 'production',
     target: 'node',
-    cache: {
-      buildDependencies: {
-        config: [__filename],
-      },
-    },
     module: {
       parser: {
         javascript: {