Merge pull request #1740 from docschina/sync-d054d465-1

awxiaoxian2020 · web-flow · commit 018d03ca947e · 2023-10-11T10:39:18.000+08:00
docs(en): merge webpack.js.org/sync-loader-plugin into webpack.js.org/cn @ d054d46
diff --git a/package.json b/package.json
@@ -28,15 +28,15 @@
     "clean-printable": "rimraf src/content/**/printable.mdx",
     "preclean": "run-s clean-dist clean-printable",
     "clean": "rimraf src/content/**/_*.mdx src/**/_*.json repositories/*.json",
-    "start": "npm run clean-dist && webpack serve --config webpack.dev.mjs --env dev --progress --node-env development",
+    "start": "npm run clean-dist && webpack serve --config webpack.dev.mjs --env dev --progress --define-process-env-node-env development",
     "content": "node src/scripts/build-content-tree.mjs ./src/content ./src/_content.json",
-    "bundle-analyze": "run-s clean fetch content && webpack --config webpack.prod.mjs --node-env production && run-s printable content && webpack --config webpack.ssg.mjs --node-env production --env ssg --profile --json > stats.json && webpack-bundle-analyzer stats.json",
+    "bundle-analyze": "run-s clean fetch content && webpack --config webpack.prod.mjs --define-process-env-node-env production && run-s printable content && webpack --config webpack.ssg.mjs --define-process-env-node-env production --env ssg --profile --json > stats.json && webpack-bundle-analyzer stats.json",
     "fetch-repos": "node src/utilities/fetch-package-repos.mjs",
     "fetch": "run-p fetch:*",
     "fetch:readmes": "node src/utilities/fetch-package-readmes.mjs",
     "fetch:supporters": "node src/utilities/fetch-supporters.mjs",
     "prebuild": "npm run clean",
-    "build": "run-s content && webpack --config webpack.prod.mjs --node-env production && run-s printable content && webpack --config webpack.ssg.mjs --node-env production --env ssg",
+    "build": "run-s fetch-repos fetch content && webpack --config webpack.prod.mjs --define-process-env-node-env production && run-s printable content && webpack --config webpack.ssg.mjs --define-process-env-node-env production --env ssg",
     "postbuild": "npm run sitemap",
     "build-test": "npm run build && http-server --port 4200 dist/",
     "serve-dist": "http-server --port 4200 dist/",
@@ -48,9 +48,6 @@
     "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/*",
-    "lint:heading-blog": "textlint --fix src/content/blog/*",
-    "lint:headingMDX": "textlint --fix src/content/**/*.mdx",
     "sitemap": "cd dist && sitemap-static --ignore-file=../sitemap-ignore.json --pretty --prefix=https://webpack.js.org/ > sitemap.xml",
     "serve": "npm run build && sirv start ./dist --port 4000",
     "preprintable": "npm run clean-printable",
@@ -73,102 +70,97 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.19.6",
-    "@babel/eslint-parser": "^7.19.1",
+    "@babel/core": "^7.22.19",
+    "@babel/eslint-parser": "^7.22.15",
     "@babel/plugin-proposal-class-properties": "^7.17.12",
-    "@babel/preset-env": "^7.19.4",
-    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-env": "^7.22.15",
+    "@babel/preset-react": "^7.22.15",
     "@mdx-js/loader": "^2.0.0-next.9",
-    "@octokit/auth-action": "^2.0.2",
-    "@octokit/rest": "^19.0.5",
+    "@octokit/auth-action": "^4.0.0",
+    "@octokit/rest": "^20.0.1",
     "@pmmmwh/react-refresh-webpack-plugin": "next",
-    "@svgr/webpack": "^6.5.1",
-    "autoprefixer": "^10.4.13",
-    "babel-loader": "^9.0.0",
+    "@svgr/webpack": "^8.1.0",
+    "autoprefixer": "^10.4.15",
+    "babel-loader": "^9.1.3",
     "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.7.1",
-    "css-minimizer-webpack-plugin": "^4.2.2",
-    "cypress": "^10.11.0",
-    "directory-tree": "^3.3.1",
+    "css-loader": "^6.8.1",
+    "css-minimizer-webpack-plugin": "^5.0.1",
+    "cypress": "^13.2.0",
+    "directory-tree": "^3.5.1",
     "directory-tree-webpack-plugin": "^1.0.3",
     "duplexer": "^0.1.1",
-    "eslint": "^8.26.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-mdx": "^2.0.5",
-    "eslint-plugin-react": "^7.31.10",
+    "eslint": "^8.49.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-cypress": "^2.14.0",
+    "eslint-plugin-mdx": "^2.2.0",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "front-matter": "^4.0.2",
     "github-slugger": "^2.0.0",
-    "html-loader": "^2.1.2",
-    "html-webpack-plugin": "^5.5.0",
+    "html-webpack-plugin": "^5.5.3",
     "http-server": "^14.1.1",
-    "husky": "^8.0.1",
+    "husky": "^8.0.3",
     "hyperlink": "^5.0.4",
     "jest": "^29.7.0",
-    "lightningcss": "^1.16.0",
-    "lint-staged": "^13.0.3",
+    "lightningcss": "^1.21.8",
+    "lint-staged": "^14.0.1",
     "lodash": "^4.17.21",
-    "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",
+    "markdownlint-cli": "^0.36.0",
+    "mdast-util-to-string": "^4.0.0",
+    "mini-css-extract-plugin": "^2.7.6",
+    "mkdirp": "^3.0.1",
     "modularscale-sass": "^3.0.3",
-    "node-fetch": "^3.2.10",
     "npm-run-all": "^4.1.1",
-    "postcss": "^8.4.18",
-    "postcss-loader": "^7.0.1",
-    "prettier": "^2.7.1",
+    "postcss": "^8.4.29",
+    "postcss-loader": "^7.3.3",
+    "prettier": "^3.0.3",
     "react-refresh": "^0.14.0",
     "redirect-webpack-plugin": "^1.0.0",
-    "remark": "^14.0.2",
+    "remark": "^14.0.3",
     "remark-autolink-headings": "7.0.1",
-    "remark-emoji": "^3.0.2",
+    "remark-emoji": "^4.0.0",
     "remark-extract-anchors": "1.1.1",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^1.0.0",
-    "remark-html": "^15.0.1",
+    "remark-html": "^15.0.2",
     "remark-refractor": "montogeek/remark-refractor",
-    "rimraf": "^3.0.2",
-    "sass": "^1.55.0",
-    "sass-loader": "^13.1.0",
+    "rimraf": "^5.0.1",
+    "sass": "^1.67.0",
+    "sass-loader": "^13.3.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.2.1",
+    "style-loader": "^3.3.3",
+    "tailwindcss": "^3.3.3",
     "tap-spot": "^1.1.2",
-    "textlint": "^11.8.2",
-    "textlint-rule-heading": "^1.0.10",
-    "unist-util-visit": "^4.1.1",
-    "webpack": "^5.74.0",
-    "webpack-bundle-analyzer": "^4.7.0",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.11.1",
-    "webpack-merge": "^5.8.0",
-    "workbox-webpack-plugin": "^6.5.4",
-    "yarn-deduplicate": "^6.0.0"
+    "unist-util-visit": "^5.0.0",
+    "webpack": "^5.88.2",
+    "webpack-bundle-analyzer": "^4.9.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1",
+    "webpack-merge": "^5.9.0",
+    "workbox-webpack-plugin": "^7.0.0",
+    "yarn-deduplicate": "^6.0.2"
   },
   "dependencies": {
     "@docsearch/react": "^3.0.0-alpha.50",
+    "@react-spring/web": "^9.7.3",
     "path-browserify": "^1.0.1",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet-async": "^1.3.0",
-    "react-router-dom": "^6.4.2",
-    "react-spring": "^9.5.5",
+    "react-router-dom": "^6.16.0",
     "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.4"
+    "workbox-window": "^7.0.0"
   },
   "resolutions": {
     "sitemap-static/minimist": "1.2.5",
     "ini": "1.3.7",
-    "eval": "^0.1.5"
+    "eval": "^0.1.5",
+    "markdownlint-cli/markdownlint": "^0.27.0"
   }
 }
diff --git a/src/content/guides/typescript.mdx b/src/content/guides/typescript.mdx
@@ -117,7 +117,7 @@ module.exports = {
   document.body.appendChild(component());
 ```
 
-T> 如果想在 TypeScript 中继续使用像 `import _ from 'lodash';` 的语法，让它被作为一种默认的导入方式，需要在 **tsconfig.json** 中设置 `"allowSyntheticDefaultImports" : true` 和 `"esModuleInterop" : true`。这是与 TypeScript 相关的配置，在本文档中提及仅供参考。
+T> 如果想在 TypeScript 中保留如 `import _ from 'lodash';` 的语法让它被作为一种默认的导入方式，需要在文件 **tsconfig.json** 中设置 `"allowSyntheticDefaultImports" : true` 和 `"esModuleInterop" : true`。这是与 TypeScript 相关的配置，在本文档中提及仅供参考。
 
 ## loader $#loader$
 
diff --git a/src/content/plugins/image-minimizer-webpack-plugin.mdx b/src/content/plugins/image-minimizer-webpack-plugin.mdx
@@ -283,7 +283,7 @@ module.exports = {
 |               **[`minify`](#minify)**               |      `{Function \| Array<Function>}`      |            `ImageMinimizerPlugin.imageminMinify`            | Allows to override default minify function                                                        |
 |     **[`minimizerOptions`](#minimizeroptions)**     |         `{Object\|Array<Object>}`         |                      `{ plugins: [] }`                      | Options for `imagemin`                                                                            |
 |               **[`loader`](#loader)**               |                `{Boolean}`                |                           `true`                            | Automatically adding `imagemin-loader`                                                            |
-|       **[`maxConcurrency`](#maxconcurrency)**       |                `{Number}`                 |             `Math.max(1, os.cpus().length - 1)`             | Maximum number of concurrency optimization processes in one time                                  |
+|          **[`concurrency`](#concurrency)**          |                `{Number}`                 |             `Math.max(1, os.cpus().length - 1)`             | Maximum number of concurrency optimization processes in one time                                  |
 |             **[`filename`](#filename)**             |           `{string\|Function}`            |                    `'[path][name][ext]'`                    | Allows to set the filename for the generated asset. Useful for converting to a `webp`             |
 | **[`deleteOriginalAssets`](#deleteoriginalassets)** |                `{Boolean}`                |                           `false`                           | Allows to delete the original asset. Useful for converting to a `webp` and remove original assets |
 
@@ -610,7 +610,7 @@ module.exports = {
 };
 ```
 
-#### `maxConcurrency`
+#### `concurrency`
 
 Type: `Number`
 Default: `Math.max(1, os.cpus().length - 1)`
@@ -625,7 +625,7 @@ const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
 module.exports = {
   plugins: [
     new ImageMinimizerPlugin({
-      maxConcurrency: 3,
+      concurrency: 3,
     }),
   ],
 };
@@ -1230,17 +1230,6 @@ The function normalizes configuration (converts plugins names and options to `Fu
 ```js
 const imagemin = require("imagemin");
 const { imageminNormalizeConfig } = require("image-minimizer-webpack-plugin");
-const imageminConfig = imageminNormalizeConfig({
-  plugins: [
-    "jpegtran",
-    [
-      "pngquant",
-      {
-        quality: [0.6, 0.8],
-      },
-    ],
-  ],
-});
 
 /*
   console.log(imageminConfig);
@@ -1255,6 +1244,9 @@ const imageminConfig = imageminNormalizeConfig({
 */
 
 (async () => {
+  const imageminConfig = await imageminNormalizeConfig({
+    plugins: ["jpegtran", ["pngquant", { quality: [0.6, 0.8] }]],
+  });
   const files = await imagemin(["images/*.{jpg,png}"], {
     destination: "build/images",
     plugins: imageminConfig.plugins,
diff --git a/src/utilities/fetch-package-readmes.mjs b/src/utilities/fetch-package-readmes.mjs
@@ -2,9 +2,9 @@ import _ from 'lodash';
 import fs from 'fs';
 import path from 'path';
 import { promisify } from 'util';
-import mkdirp from 'mkdirp';
-import fetch from 'node-fetch';
+import { mkdirp } from 'mkdirp';
 import { fileURLToPath } from 'url';
+import api from './githubAPI.mjs';
 
 import yamlHeadmatter from './yaml-headmatter.mjs';
 import processReadme from './process-readme.mjs';
@@ -13,7 +13,6 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 const writeFile = promisify(fs.writeFile);
-const rename = promisify(fs.rename);
 const readFile = promisify(fs.readFile);
 const cwd = process.cwd();
 
@@ -32,22 +31,34 @@ const loaderGroup = {
   'style-loader': 'CSS',
   'stylus-loader': 'CSS',
 };
+const communityPackages = [{
+  name: 'svg-chunk-webpack-plugin',
+  contributors: ['yoriiis', 'alexander-akait']
+}];
 
 async function main() {
   for (const type of types) {
     const outputDir = pathMap[type];
 
     await mkdirp(outputDir);
 
+    /** @type string[] */
     const repos = JSON.parse(
       await readFile(path.resolve(__dirname, `../../repositories/${type}.json`))
     );
 
     for (const repo of repos) {
-      const [, packageName] = repo.split('/');
-      const url = `https://raw.githubusercontent.com/${repo}/master/README.md`;
+      const [owner, packageName] = repo.split('/');
+
+      const response = await api.repos.get({
+        owner,
+        repo: packageName,
+      });
+
+      const defaultBranch =  response.data.default_branch;
+      const url = `https://raw.githubusercontent.com/${repo}/${defaultBranch}/README.md`;
       const htmlUrl = `https://github.com/${repo}`;
-      const editUrl = `${htmlUrl}/edit/master/README.md`;
+      const editUrl = `${htmlUrl}/edit/${defaultBranch}/README.md`;
       const fileName = path.resolve(outputDir, `_${packageName}.mdx`);
 
       let title = packageName;
@@ -62,21 +73,29 @@ async function main() {
       let headmatter;
 
       if (type === 'plugins') {
+        let group = 'webpack contrib';
+        let contributors = [];
+        const packageFromCommunity = communityPackages.find((item) => item.name === packageName);
+        if (packageFromCommunity) {
+            group = 'Community';
+            contributors = packageFromCommunity.contributors;
+        }
         headmatter = yamlHeadmatter({
           title: title,
-          group: 'webpack contrib',
+          group,
+          contributors,
           source: url,
           edit: editUrl,
           repo: htmlUrl,
-          thirdParty: true
+          thirdParty: true,
         });
       } else {
         let basic = {
           title: title,
           source: url,
           edit: editUrl,
           repo: htmlUrl,
-          thirdParty: true
+          thirdParty: true,
         };
 
         if (loaderGroup[packageName]) {
@@ -85,12 +104,16 @@ async function main() {
         headmatter = yamlHeadmatter(basic);
       }
 
-      const response = await fetch(url);
-      const content = await response.text();
+      const { data: content } = await api.repos.getReadme({
+        owner,
+        repo: packageName,
+        mediaType: {
+          format: 'raw',
+        },
+      });
       const body = processReadme(content, { source: url });
       await writeFile(fileName, headmatter + body);
-      await rename(fileName, mdxFileName);
-      console.log('Generated:', path.relative(cwd, mdxFileName));
+      console.log('Generated:', path.relative(cwd, fileName));
     }
   }
 }
diff --git a/yarn.lock b/yarn.lock
