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

.eslintrc.js

@@ -19,6 +19,12 @@ module.exports = {
     'react/react-in-jsx-scope': 'off', // ditto
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'warn',
+    'react/no-unknown-property': [
+      'error',
+      {
+        ignore: ['watch', 'align'],
+      },
+    ],
   },
   settings: {
     react: {

.github/workflows/testing.yml

@@ -4,6 +4,25 @@ on:
   pull_request:
 
 jobs:
+  unitTest:
+    name: Unit Test
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node-version: [16.x]
+    runs-on: ${{ matrix.os }}
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: yarn
+
+      - run: yarn --frozen-lockfile
+      - run: yarn jest
+
   lint:
     name: Lint
     strategy:

package.json

@@ -21,7 +21,7 @@
     "url": "https://github.com/webpack/webpack.js.org/issues"
   },
   "engines": {
-    "node": ">=14"
+    "node": "^14.20.0 || ^16.15.0 || >=18.0.0"
   },
   "scripts": {
     "clean-dist": "rimraf ./dist",
@@ -73,31 +73,30 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.18.13",
-    "@babel/eslint-parser": "^7.18.9",
+    "@babel/core": "^7.19.1",
+    "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-class-properties": "^7.17.12",
-    "@babel/preset-env": "^7.18.10",
+    "@babel/preset-env": "^7.19.1",
     "@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",
-    "@parcel/css": "^1.13.0",
     "@pmmmwh/react-refresh-webpack-plugin": "next",
     "@svgr/webpack": "^6.3.1",
-    "autoprefixer": "^10.4.8",
+    "autoprefixer": "^10.4.11",
     "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.6.0",
-    "directory-tree": "^3.3.0",
+    "css-minimizer-webpack-plugin": "^4.1.0",
+    "cypress": "^10.7.0",
+    "directory-tree": "^3.3.1",
     "directory-tree-webpack-plugin": "^1.0.3",
     "duplexer": "^0.1.1",
-    "eslint": "^8.23.0",
+    "eslint": "^8.23.1",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-mdx": "^2.0.2",
-    "eslint-plugin-react": "^7.31.1",
+    "eslint-plugin-mdx": "^2.0.4",
+    "eslint-plugin-react": "^7.31.8",
     "eslint-plugin-react-hooks": "^4.6.0",
     "front-matter": "^4.0.2",
     "github-slugger": "^1.4.0",
@@ -106,7 +105,8 @@
     "http-server": "^14.1.1",
     "husky": "^8.0.1",
     "hyperlink": "^5.0.4",
-    "jest": "^29.0.1",
+    "jest": "^29.0.3",
+    "lightningcss": "^1.15.1",
     "lint-staged": "^13.0.3",
     "lodash": "^4.17.21",
     "markdownlint": "^0.26.2",
@@ -131,7 +131,7 @@
     "remark-html": "^15.0.1",
     "remark-refractor": "montogeek/remark-refractor",
     "rimraf": "^3.0.2",
-    "sass": "^1.54.5",
+    "sass": "^1.54.9",
     "sass-loader": "^13.0.2",
     "sirv-cli": "^2.0.2",
     "sitemap-static": "^0.4.2",
@@ -145,7 +145,7 @@
     "webpack": "^5.74.0",
     "webpack-bundle-analyzer": "^4.6.1",
     "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.10.1",
+    "webpack-dev-server": "^4.11.0",
     "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.3.0",
-    "react-spring": "^9.5.2",
+    "react-router-dom": "^6.4.0",
+    "react-spring": "^9.5.4",
     "react-tiny-popover": "5",
     "react-use": "^17.4.0",
     "react-visibility-sensor": "^5.0.2",

src/content/configuration/output.mdx

@@ -927,7 +927,7 @@ module.exports = {
 
   类型默认包括 `'var'`、 `'module'`、 `'assign'`、 `'assign-properties'`、 `'this'`、 `'window'`、 `'self'`、 `'global'`、 `'commonjs'`、 `'commonjs2'`、 `'commonjs-module'`、 `'commonjs-static'`、 `'amd'`、 `'amd-require'`、 `'umd'`、 `'umd2'`、 `'jsonp'` 以及 `'system'`，除此之外也可以通过插件添加。
 
-对于接下来的实例，我们将会使用 `__entry_return_` 表示被入口点返回的值。
+对于接下来的示例，我们将会使用 `_entry_return_` 表示被入口点返回的值。
 
 #### Expose a Variable $#exposeavariable$
 
@@ -1504,7 +1504,7 @@ module.exports = {
   //Test Comment
   else root['MyLibrary'] = factory();
 })(self, function () {
-  return __entry_return_;
+  return _entry_return_;
 });
 ```
 

src/remark-plugins/remark-cleanup-readme/__snapshots__/index.test.mjs.snap

@@ -4,9 +4,9 @@ exports[`cleanup readme should clean up div[align="center"] block with paragraph
 "/* @jsxRuntime classic */
 /* @jsx mdx */
 /* @jsxFrag mdx.Fragment */
-const MDXLayout = \\"wrapper\\";
+const MDXLayout = "wrapper";
 function MDXContent({components, ...props}) {
-  return <MDXLayout components={components} {...props}><div align=\\"center\\"><p parentName=\\"div\\"><h1 parentName=\\"p\\">{\\"Imagemin Webpack\\"}</h1></p><p parentName=\\"div\\"><p parentName=\\"p\\">{\\"Plugin and Loader for \\"}<a href=\\"http://webpack.js.org/\\" parentName=\\"p\\">{\\"webpack\\"}</a>{\\" to optimize (compress) all images using \\"}<a href=\\"https://github.com/imagemin/imagemin\\" parentName=\\"p\\">{\\"imagemin\\"}</a>{\\".\\\\nDo not worry about size of images, now they are always optimized/compressed.\\"}</p></p></div></MDXLayout>;
+  return <MDXLayout components={components} {...props}><div align="center"><p parentName="div"><h1 parentName="p">{"Imagemin Webpack"}</h1></p><p parentName="div"><p parentName="p">{"Plugin and Loader for "}<a href="http://webpack.js.org/" parentName="p">{"webpack"}</a>{" to optimize (compress) all images using "}<a href="https://github.com/imagemin/imagemin" parentName="p">{"imagemin"}</a>{".\\nDo not worry about size of images, now they are always optimized/compressed."}</p></p></div></MDXLayout>;
 }
 MDXContent.isMDXComponent = true;
 export default MDXContent;
@@ -17,9 +17,9 @@ exports[`cleanup readme should clean up div[align="center"] block without paragr
 "/* @jsxRuntime classic */
 /* @jsx mdx */
 /* @jsxFrag mdx.Fragment */
-const MDXLayout = \\"wrapper\\";
+const MDXLayout = "wrapper";
 function MDXContent({components, ...props}) {
-  return <MDXLayout components={components} {...props}><div align=\\"center\\" /></MDXLayout>;
+  return <MDXLayout components={components} {...props}><div align="center" /></MDXLayout>;
 }
 MDXContent.isMDXComponent = true;
 export default MDXContent;
@@ -30,9 +30,9 @@ exports[`cleanup readme should clean up nested div[align="center"] block  1`] =
 "/* @jsxRuntime classic */
 /* @jsx mdx */
 /* @jsxFrag mdx.Fragment */
-const MDXLayout = \\"wrapper\\";
+const MDXLayout = "wrapper";
 function MDXContent({components, ...props}) {
-  return <MDXLayout components={components} {...props}><div align=\\"center\\" /></MDXLayout>;
+  return <MDXLayout components={components} {...props}><div align="center" /></MDXLayout>;
 }
 MDXContent.isMDXComponent = true;
 export default MDXContent;

src/remark-plugins/remark-custom-asides/__snapshots__/index.test.mjs.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`customize blockquote should transform W> into aside of warning 1`] = `
-"<aside class=\\"warning\\"><h6 class=\\"warning__prefix\\">warning</h6><p>hello world</p></aside>
+"<aside class="warning"><h6 class="warning__prefix">warning</h6><p>hello world</p></aside>
 "
 `;

src/remark-plugins/remark-custom-asides/index.test.mjs

@@ -9,7 +9,9 @@ describe('customize blockquote', () => {
           'W>': 'warning',
         },
       })
-      .use(remarkHtml)
+      .use(remarkHtml, {
+        sanitize: false
+      })
       .process(
         `
 W> hello world

src/remark-plugins/remark-remove-heading-id/__snapshots__/index.test.mjs.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`customize blockquote should add id 1`] = `
-"<h2><span id=\\"user-content-hello-world\\"></span>hello world</h2>
+"<h2><span id="user-content-hello-world"></span>hello world</h2>
 <p>this is me.</p>
 "
 `;

src/remark-plugins/remark-responsive-table/__snapshots__/remark-responsive-table.test.mjs.snap

@@ -10,12 +10,12 @@ exports[`responsive table should add data-th 1`] = `
 </thead>
 <tbody>
 <tr>
-<td data-th=\\"foo\\"><span>baz</span></td>
-<td data-th=\\"bar\\"><span>-</span></td>
+<td data-th="foo"><span>baz</span></td>
+<td data-th="bar"><span>-</span></td>
 </tr>
 <tr>
-<td data-th=\\"foo\\"><span>sam</span></td>
-<td data-th=\\"bar\\"><span>chen</span></td>
+<td data-th="foo"><span>sam</span></td>
+<td data-th="bar"><span>chen</span></td>
 </tr>
 </tbody>
 </table>
@@ -32,12 +32,12 @@ exports[`responsive table should handle empty thead 1`] = `
 </thead>
 <tbody>
 <tr>
-<td data-th=\\"\\"><span>baz</span></td>
-<td data-th=\\"bar\\"><span>-</span></td>
+<td data-th=""><span>baz</span></td>
+<td data-th="bar"><span>-</span></td>
 </tr>
 <tr>
-<td data-th=\\"\\"><span>sam</span></td>
-<td data-th=\\"bar\\"><span>chen</span></td>
+<td data-th=""><span>sam</span></td>
+<td data-th="bar"><span>chen</span></td>
 </tr>
 </tbody>
 </table>

src/remark-plugins/remark-responsive-table/remark-responsive-table.test.mjs

@@ -8,7 +8,9 @@ describe('responsive table', () => {
   const processor = remark()
     .use(remarkGfm)
     .use(remarkResponsiveTable)
-    .use(remarkHtml);
+    .use(remarkHtml, {
+      sanitize: false,
+    });
   it('should add data-th', () => {
     processor.process(
       `

src/remark-plugins/remark-slug/__snapshots__/index.test.mjs.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`remark slug should add id 1`] = `
-"<h2 id=\\"user-content-hello-world\\"><span id=\\"user-content-hello-world\\"></span>hello world</h2>
+"<h2 id="user-content-hello-world"><span id="user-content-hello-world"></span>hello world</h2>
 <p>this is me.</p>
 "
 `;

webpack.prod.mjs

@@ -38,7 +38,7 @@ export default (env) =>
       minimizer: [
         '...',
         new CssMinimizerPlugin({
-          minify: CssMinimizerPlugin.parcelCssMinify,
+          minify: CssMinimizerPlugin.lightningCssMinify,
         }),
       ],
     },

webpack.ssg.mjs

@@ -41,7 +41,7 @@ export default (env) =>
     optimization: {
       minimizer: [
         new CssMinimizerPlugin({
-          minify: CssMinimizerPlugin.parcelCssMinify,
+          minify: CssMinimizerPlugin.lightningCssMinify,
         }),
       ],
     },