docs: update plugin compatible table (#8526)

chenjiahan · web-flow · commit 8c3a2b083df3 · 2024-11-25T18:35:26.000+08:00
* docs: update plugin compatible table

* docs: update
diff --git a/website/components/CommunityCompatibleTable.tsx b/website/components/CommunityCompatibleTable.tsx
@@ -112,13 +112,13 @@ export const CommunityPluginCompatibleTable: React.FC = () => {
     {
       name: 'fork-ts-checker-webpack-plugin',
       url: 'https://github.com/TypeStrong/fork-ts-checker-webpack-plugin',
-      status: CompatibleStatus.Compatible,
+      status: CompatibleStatus.Alternative,
+      description: i18n[lang]['fork-ts-checker-webpack-plugin-desc'],
     },
     {
       name: 'html-webpack-plugin',
       url: 'https://www.npmjs.com/package/html-webpack-plugin',
       status: CompatibleStatus.Compatible,
-      description: i18n[lang]['html-webpack-plugin-desc'],
     },
     {
       name: 'mini-css-extract-plugin',
@@ -236,8 +236,7 @@ export const CommunityPluginCompatibleTable: React.FC = () => {
     {
       name: 'webpackbar',
       url: 'https://www.npmjs.com/package/webpackbar',
-      status: CompatibleStatus.NotCompatible,
-      description: i18n[lang]['progress-plugin-desc'],
+      status: CompatibleStatus.Compatible,
     },
     {
       name: 'progress-bar-webpack-plugin',
diff --git a/website/components/i18n/en.json b/website/components/i18n/en.json
@@ -4,8 +4,7 @@
   "included": "included",
   "babel-loader-description": "SWC has been used internally to implement babel-loader with most of its conversion capabilities",
   "babel-loader-remark": "Be cautious of the performance impact of babel-loader",
-  "html-webpack-plugin-desc": "Support for this plugin was implemented in v0.3.3, please upgrade the Rspack version to use it",
-  "sentry_webpack-plugin-desc": "Support for the plugin version v1.20.1 and above has been implemented in v0.3.3",
+  "sentry_webpack-plugin-desc": "Support for this plugin >= v1.20.1",
   "copy-plugin-desc": "Use [CopyRspackPlugin](/plugins/rspack/copy-rspack-plugin) instead",
   "mini-css-extract-plugin-desc": "Use [CssExtractRspackPlugin](/plugins/rspack/css-extract-rspack-plugin) instead",
   "terser-webpack-plugin-desc": "Rspack provides [SwcJsMinimizerRspackPlugin](/plugins/rspack/swc-js-minimizer-rspack-plugin) to deliver better performance",
@@ -24,8 +23,9 @@
   "webpack-filter-warnings-plugin-desc": "Use [ignoreWarnings](/config/other-options#ignorewarnings) instead",
   "speed-measure-webpack-plugin-desc": "Use [Rsdoctor](/guide/optimization/use-rsdoctor) instead",
   "eslint-webpack-plugin-desc": "Use [eslint-rspack-plugin](https://github.com/rspack-contrib/eslint-rspack-plugin) instead",
-  "circular-dependency-plugin-desc": "Use Eslint [import/no-cycle](https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-cycle.md) rule instead",
+  "circular-dependency-plugin-desc": "Use ESLint [import/no-cycle](https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-cycle.md) rule instead",
   "html-webpack-tags-plugin-desc": "Use [html-rspack-tags-plugin](https://github.com/rspack-contrib/html-rspack-tags-plugin) instead",
   "needs-html-webpack-plugin": "This plugin depends on html-webpack-plugin",
-  "webpack-assets-manifest-desc": "Only supports basic usage"
+  "webpack-assets-manifest-desc": "Only supports basic usage",
+  "fork-ts-checker-webpack-plugin-desc": "Use [ts-checker-rspack-plugin](https://github.com/rspack-contrib/ts-checker-rspack-plugin) instead"
 }
diff --git a/website/components/i18n/zh.json b/website/components/i18n/zh.json
@@ -4,8 +4,7 @@
   "included": "已内置",
   "babel-loader-description": "内部使用 SWC 实现了 babel-loader 的大部分转换功能",
   "babel-loader-remark": "babel-loader 对性能影响较大，请谨慎使用",
-  "html-webpack-plugin-desc": "在 v0.3.3 已实现对该插件的支持，请升级 Rspack 版本来使用",
-  "sentry_webpack-plugin-desc": "在 v0.3.3 已实现对该插件 v1.20.1 以上版本的支持",
+  "sentry_webpack-plugin-desc": "支持该插件 >= v1.20.1 版本",
   "copy-plugin-desc": "使用 [CopyRspackPlugin](/plugins/rspack/copy-rspack-plugin) 替代",
   "mini-css-extract-plugin-desc": "使用 [CssExtractRspackPlugin](/plugins/rspack/css-extract-rspack-plugin) 替代",
   "terser-webpack-plugin-desc": "Rspack 提供 [SwcJsMinimizerRspackPlugin](/plugins/rspack/swc-js-minimizer-rspack-plugin) 以带来更好的性能",
@@ -24,8 +23,9 @@
   "webpack-filter-warnings-plugin-desc": "使用 [ignoreWarnings](/config/other-options#ignorewarnings) 替代",
   "speed-measure-webpack-plugin-desc": "使用 [Rsdoctor](/guide/optimization/use-rsdoctor) 替代",
   "eslint-webpack-plugin-desc": "使用 [eslint-rspack-plugin](https://github.com/rspack-contrib/eslint-rspack-plugin) 替代",
-  "circular-dependency-plugin-desc": "使用 Eslint [import/no-cycle](https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-cycle.md) 规则替代",
+  "circular-dependency-plugin-desc": "使用 ESLint [import/no-cycle](https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-cycle.md) 规则替代",
   "html-webpack-tags-plugin-desc": "使用 [html-rspack-tags-plugin](https://github.com/rspack-contrib/html-rspack-tags-plugin) 替代",
   "needs-html-webpack-plugin": "该插件依赖了 html-webpack-plugin",
-  "webpack-assets-manifest-desc": "仅支持基础用法"
+  "webpack-assets-manifest-desc": "仅支持基础用法",
+  "fork-ts-checker-webpack-plugin-desc": "使用 [ts-checker-rspack-plugin](https://github.com/rspack-contrib/ts-checker-rspack-plugin) 替代"
 }
diff --git a/website/docs/en/config/plugins.mdx b/website/docs/en/config/plugins.mdx
@@ -22,10 +22,10 @@ Rspack strives to maintain compatibility with the webpack plugin ecosystem to le
 
 ```js title=rspack.config.js
 const rspack = require('@rspack/core');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
   //...
-  plugins: [new ForkTsCheckerWebpackPlugin()],
+  plugins: [new HtmlWebpackPlugin()],
 };
 ```
diff --git a/website/docs/en/guide/migration/webpack.mdx b/website/docs/en/guide/migration/webpack.mdx
@@ -22,9 +22,9 @@ Now you can remove the webpack-related dependencies from your project:
 <PackageManagerTabs command="remove webpack webpack-cli webpack-dev-server" />
 
 :::tip
-In some cases, you will still need to keep `webpack` as a dev dependency, such as when using [vue-loader](https://github.com/vuejs/vue-loader) or [fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin).
+In some cases, you will still need to keep `webpack` as a dev dependency, such as when using [vue-loader](https://github.com/vuejs/vue-loader).
 
-This is because these plugins directly `import` subpaths of webpack and couple with webpack. If you encounter this issue, you can provide feedback to the maintainers of these plugins, asking them if they can make `webpack` an optional dependency.
+This is because these packages directly `import` subpaths of webpack and couple with webpack. If you encounter this issue, you can provide feedback to the maintainers of these plugins, asking them if they can make `webpack` an optional dependency.
 :::
 
 ## Updating package.json
@@ -101,7 +101,9 @@ Rspack supports most of the webpack community plugins and also offers alternativ
 
 Check [Plugin compat](/guide/compatibility/plugin) for more information on Rspack's compatibility with popular webpack community plugins.
 
-### [copy-webpack-plugin](https://github.com/webpack-contrib/copy-webpack-plugin) → [rspack.CopyRspackPlugin](/plugins/rspack/copy-rspack-plugin)
+### `copy-webpack-plugin`
+
+Use [rspack.CopyRspackPlugin](/plugins/rspack/copy-rspack-plugin) instead of [copy-webpack-plugin](https://github.com/webpack-contrib/copy-webpack-plugin):
 
 ```diff title="rspack.config.js"
 - const CopyWebpackPlugin = require('copy-webpack-plugin');
@@ -117,7 +119,9 @@ module.exports = {
 }
 ```
 
-### [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) → [rspack.CssExtractRspackPlugin](/plugins/rspack/css-extract-rspack-plugin)
+### `mini-css-extract-plugin`
+
+Use [rspack.CssExtractRspackPlugin](/plugins/rspack/css-extract-rspack-plugin) instead of [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin):
 
 ```diff title="rspack.config.js"
 - const CssExtractWebpackPlugin = require('mini-css-extract-plugin');
@@ -135,18 +139,20 @@ module.exports = {
       {
         test: /\.css$/i,
         use: [
--          CssExtractWebpackPlugin.loader,
-+          rspack.CssExtractRspackPlugin.loader,
+-         CssExtractWebpackPlugin.loader,
++         rspack.CssExtractRspackPlugin.loader,
           "css-loader"
         ],
-+        type: 'javascript/auto'
++       type: 'javascript/auto'
       }
     ]
   }
 }
 ```
 
-### [tsconfig-paths-webpack-plugin](https://github.com/dividab/tsconfig-paths-webpack-plugin) → [resolve.tsConfig](/config/resolve#resolvetsconfig)
+### `tsconfig-paths-webpack-plugin`
+
+Use [resolve.tsConfig](/config/resolve#resolvetsconfig) instead of [tsconfig-paths-webpack-plugin](https://github.com/dividab/tsconfig-paths-webpack-plugin):
 
 ```diff title="rspack.config.js"
 - const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
@@ -159,6 +165,22 @@ module.exports = {
 }
 ```
 
+### `fork-ts-checker-webpack-plugin`
+
+Use [ts-checker-rspack-plugin](https://github.com/rspack-contrib/ts-checker-rspack-plugin) instead of [fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin):
+
+```diff title="rspack.config.js"
+- const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
++ const { TsCheckerRspackPlugin } = require('ts-checker-rspack-plugin');
+
+module.exports = {
+  plugins: [
+-   new ForkTsCheckerWebpackPlugin()
++   new TsCheckerRspackPlugin()
+  ]
+}
+```
+
 ## Loaders
 
 Rspack's loader runner is fully compatible with webpack's loader functionality, supporting the vast majority of webpack loaders.
diff --git a/website/docs/en/guide/tech/typescript.mdx b/website/docs/en/guide/tech/typescript.mdx
@@ -44,13 +44,13 @@ To maximize parallelism, `builtin:swc-loader` will transpile each module separat
 
 ## TypeCheck
 
-You can use the [fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) to perform TypeScript type checking during compilation. However, it's important to note that TypeScript's type checking can be time-consuming, especially for larger projects. This means that the time required for type checking may exceed the build time of Rspack itself.
+You can use the [ts-checker-rspack-plugin](https://github.com/rspack-contrib/ts-checker-rspack-plugin) to perform TypeScript type checking during compilation. However, it's important to note that TypeScript's type checking can be time-consuming, especially for larger projects. This means that the time required for type checking may exceed the build time of Rspack itself.
 
 If you are using the plugin in development mode, it won't block the build and you can continue with the build process. However, in build mode, the plugin will block the build until the type checking is complete which may lead to longer build times.
 
 Based on your actual needs, you should decide whether to enable this plugin. If the type checking process becomes a bottleneck in your build process, we recommend using TypeScript's incremental build feature. This feature can greatly speed up the type checking process by only analyzing the changed files since the last build.
 
-To enable TypeScript's incremental build, you can use `tsc --incremental` independently or [enabling incremental mode](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#enabling-incremental-mode) in the plugin.
+To enable TypeScript's incremental build, you can use `tsc --incremental` independently or [enabling incremental mode](https://github.com/rspack-contrib/ts-checker-rspack-plugin#enabling-incremental-mode) in the plugin.
 
 Enabling incremental build can help reduce type checking time, especially when only a few files have been modified. This way, you can optimize your build process without sacrificing the benefits of type checking.
 
diff --git a/website/docs/zh/config/plugins.mdx b/website/docs/zh/config/plugins.mdx
@@ -22,10 +22,10 @@ Rspack 致力于兼容 webpack 生态下的插件，以使用社区中已经积
 
 ```js title=rspack.config.js
 const rspack = require('@rspack/core');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
   //...
-  plugins: [new ForkTsCheckerWebpackPlugin()],
+  plugins: [new HtmlWebpackPlugin()],
 };
 ```
diff --git a/website/docs/zh/guide/migration/webpack.mdx b/website/docs/zh/guide/migration/webpack.mdx
@@ -21,9 +21,9 @@ Rspack 的配置是基于 webpack 的设计实现的，以此你能够非常轻
 <PackageManagerTabs command="remove webpack webpack-cli webpack-dev-server" />
 
 :::tip
-在个别情况下，你仍然需要保留 `webpack` 作为开发依赖，例如使用 [vue-loader](https://github.com/vuejs/vue-loader) 或 [fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) 时。
+在个别情况下，你仍然需要保留 `webpack` 作为开发依赖，例如使用 [vue-loader](https://github.com/vuejs/vue-loader) 时。
 
-这是因为这些插件直接 `import` 了 webpack 的子路径，与 webpack 产生了耦合。如果你遇到了这种情况，可以向这些插件的维护者反馈，询问他们能否将 `webpack` 作为可选依赖。
+这是因为这些库直接 `import` 了 webpack 的子路径，与 webpack 产生了耦合。如果你遇到了这种情况，可以向这些插件的维护者反馈，询问他们能否将 `webpack` 作为可选依赖。
 :::
 
 ## 修改 package.json
@@ -96,9 +96,11 @@ module.exports = {
 
 Rspack 支持大部分 webpack 社区插件，并为暂不支持的插件提供了替代方案。
 
-查看[Plugin 兼容](/guide/compatibility/plugin)以了解 Rspack 对 webpack 常见社区插件的兼容情况。
+查看 [Plugin 兼容](/guide/compatibility/plugin) 以了解 Rspack 对 webpack 常见社区插件的兼容情况。
 
-### [copy-webpack-plugin](https://github.com/webpack-contrib/copy-webpack-plugin) → [rspack.CopyRspackPlugin](/plugins/rspack/copy-rspack-plugin)
+### `copy-webpack-plugin`
+
+使用 [rspack.CopyRspackPlugin](/plugins/rspack/copy-rspack-plugin) 代替 [copy-webpack-plugin](https://github.com/webpack-contrib/copy-webpack-plugin)：
 
 ```diff title="rspack.config.js"
 - const CopyWebpackPlugin = require('copy-webpack-plugin');
@@ -114,7 +116,9 @@ module.exports = {
 }
 ```
 
-### [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) → [rspack.CssExtractRspackPlugin](/plugins/rspack/css-extract-rspack-plugin)
+### `mini-css-extract-plugin`
+
+使用 [rspack.CssExtractRspackPlugin](/plugins/rspack/css-extract-rspack-plugin) 代替 [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin)：
 
 ```diff title="rspack.config.js"
 - const CssExtractWebpackPlugin = require('mini-css-extract-plugin');
@@ -132,18 +136,20 @@ module.exports = {
       {
         test: /\.css$/i,
         use: [
--          CssExtractWebpackPlugin.loader,
-+          rspack.CssExtractRspackPlugin.loader,
+-         CssExtractWebpackPlugin.loader,
++         rspack.CssExtractRspackPlugin.loader,
           "css-loader"
         ],
-+        type: 'javascript/auto'
++       type: 'javascript/auto'
       }
     ]
   }
 }
 ```
 
-### [tsconfig-paths-webpack-plugin](https://github.com/dividab/tsconfig-paths-webpack-plugin) → [resolve.tsConfig](/config/resolve#resolvetsconfig)
+### `tsconfig-paths-webpack-plugin`
+
+使用 [resolve.tsConfig](/config/resolve#resolvetsconfig) 代替 [tsconfig-paths-webpack-plugin](https://github.com/dividab/tsconfig-paths-webpack-plugin)：
 
 ```diff title="rspack.config.js"
 - const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
@@ -156,6 +162,22 @@ module.exports = {
 }
 ```
 
+### `fork-ts-checker-webpack-plugin`
+
+使用 [ts-checker-rspack-plugin](https://github.com/rspack-contrib/ts-checker-rspack-plugin) 代替 [fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin)：
+
+```diff title="rspack.config.js"
+- const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
++ const { TsCheckerRspackPlugin } = require('ts-checker-rspack-plugin');
+
+module.exports = {
+  plugins: [
+-   new ForkTsCheckerWebpackPlugin()
++   new TsCheckerRspackPlugin()
+  ]
+}
+```
+
 ## Loader
 
 Rspack 已实现了与 Webpack 功能完全对齐的 loader 执行器，支持绝大多数 webpack loader，因此你可以直接使用现有的 loader 而无需修改。不过，为了获得最佳性能，我们仍建议进行以下迁移：
diff --git a/website/docs/zh/guide/tech/typescript.mdx b/website/docs/zh/guide/tech/typescript.mdx
@@ -45,13 +45,13 @@ module.exports = {
 
 ## 类型检查
 
-你可以使用 [fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) 在编译过程中执行 TypeScript 类型检查。然而，需要注意的是，特别是对于较大的项目，TypeScript 的类型检查可能非常耗时。这意味着类型检查所需的时间可能超过 Rspack 本身的构建时间。
+你可以使用 [ts-checker-rspack-plugin](https://github.com/rspack-contrib/ts-checker-rspack-plugin) 在编译过程中执行 TypeScript 类型检查。然而，需要注意的是，特别是对于较大的项目，TypeScript 的类型检查可能非常耗时。这意味着类型检查所需的时间可能超过 Rspack 本身的构建时间。
 
 如果你在开发模式下使用该插件，它将不会阻塞构建过程，你可以继续进行构建。但是，在构建模式下，该插件将会阻塞构建，直到类型检查完成，所以可能会导致构建时间变长。
 
 根据你的实际需求，你应该决定是否启用该插件。如果类型检查过程成为构建过程的瓶颈，我们建议使用 TypeScript 的增量构建功能。该功能可以通过仅分析自上次构建以来修改的文件来大大加快类型检查的速度。
 
-要启用 TypeScript 的增量构建，你可以在独立使用 `tsc --incremental` 或者在插件里[使用 incremental mode](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#enabling-incremental-mode)。
+要启用 TypeScript 的增量构建，你可以在独立使用 `tsc --incremental` 或者在插件里[使用 incremental mode](https://github.com/rspack-contrib/ts-checker-rspack-plugin#enabling-incremental-mode)。
 
 启用增量构建可以帮助减少类型检查的时间，特别是当只有少数文件被修改时。这样，你可以在优化构建过程的同时，不会损失类型检查的好处。
 

Original file line number	Diff line number	Diff line change
`@@ -112,13 +112,13 @@ export const CommunityPluginCompatibleTable: React.FC = () => {`
`112`	`112`	`{`
`113`	`113`	`name: 'fork-ts-checker-webpack-plugin',`
`114`	`114`	`url: 'https://github.com/TypeStrong/fork-ts-checker-webpack-plugin',`
`115`		`- status: CompatibleStatus.Compatible,`
	`115`	`+ status: CompatibleStatus.Alternative,`
	`116`	`+ description: i18n[lang]['fork-ts-checker-webpack-plugin-desc'],`
`116`	`117`	`},`
`117`	`118`	`{`
`118`	`119`	`name: 'html-webpack-plugin',`
`119`	`120`	`url: 'https://www.npmjs.com/package/html-webpack-plugin',`
`120`	`121`	`status: CompatibleStatus.Compatible,`
`121`		`- description: i18n[lang]['html-webpack-plugin-desc'],`
`122`	`122`	`},`
`123`	`123`	`{`
`124`	`124`	`name: 'mini-css-extract-plugin',`
`@@ -236,8 +236,7 @@ export const CommunityPluginCompatibleTable: React.FC = () => {`
`236`	`236`	`{`
`237`	`237`	`name: 'webpackbar',`
`238`	`238`	`url: 'https://www.npmjs.com/package/webpackbar',`
`239`		`- status: CompatibleStatus.NotCompatible,`
`240`		`- description: i18n[lang]['progress-plugin-desc'],`
	`239`	`+ status: CompatibleStatus.Compatible,`
`241`	`240`	`},`
`242`	`241`	`{`
`243`	`242`	`name: 'progress-bar-webpack-plugin',`