Skip to content

Commit

Permalink
Merge pull request #1740 from docschina/sync-d054d465-1
Browse files Browse the repository at this point in the history 
docs(en): merge webpack.js.org/sync-loader-plugin into webpack.js.org/cn @ d054d46
  • Loading branch information
@awxiaoxian2020
awxiaoxian2020 authored Oct 11, 2023
2 parents cbefd7b + 00352d5 commit 018d03c
Show file tree
Hide file tree
Showing 5 changed files with 619 additions and 945 deletions.
114 changes: 53 additions & 61 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/",
Expand All @@ -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",
Expand All @@ -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"
}
}
2 changes: 1 addition & 1 deletion src/content/guides/typescript.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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$

Expand Down
20 changes: 6 additions & 14 deletions src/content/plugins/image-minimizer-webpack-plugin.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 |

Expand Down Expand Up @@ -610,7 +610,7 @@ module.exports = {
};
```

#### `maxConcurrency`
#### `concurrency`

Type: `Number`
Default: `Math.max(1, os.cpus().length - 1)`
Expand All @@ -625,7 +625,7 @@ const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
module.exports = {
plugins: [
new ImageMinimizerPlugin({
maxConcurrency: 3,
concurrency: 3,
}),
],
};
Expand Down Expand Up @@ -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);
Expand All @@ -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,
Expand Down
49 changes: 36 additions & 13 deletions src/utilities/fetch-package-readmes.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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();

Expand All @@ -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;
Expand All @@ -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]) {
Expand All @@ -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));
}
}
}
Expand Down
Loading

0 comments on commit 018d03c

Please sign in to comment.