diff --git a/website/components/ApiMeta.module.scss b/website/components/ApiMeta.module.scss
index bbbeb3c808b..5fb9b180981 100644
--- a/website/components/ApiMeta.module.scss
+++ b/website/components/ApiMeta.module.scss
@@ -41,3 +41,7 @@
.experimental {
background-color: hsl(262deg 100% 90%);
}
+
+.specific {
+ background-color: hsl(262deg, 10%, 90%);
+}
diff --git a/website/components/ApiMeta.tsx b/website/components/ApiMeta.tsx
index 0071acc27b8..02c9626a10e 100644
--- a/website/components/ApiMeta.tsx
+++ b/website/components/ApiMeta.tsx
@@ -16,6 +16,7 @@ export interface ApiMetaProps {
removedVersion?: string;
stability?: Stability;
inline?: boolean;
+ specific?: string[];
}
export function ApiMeta(props: ApiMetaProps) {
@@ -49,6 +50,12 @@ export function ApiMeta(props: ApiMetaProps) {
Stability: {props.stability}
)}
+ {props.specific && props.specific.length > 0 && (
+
+ {props.specific.join('/')}{' '}
+ {props.specific.length > 1 ? 'specific' : 'only'}
+
+ )}
);
}
diff --git a/website/docs/en/api/loader-api/rspack-specific-properties.mdx b/website/docs/en/api/loader-api/rspack-specific-properties.mdx
index f85a3d5fde5..eb24252fb7f 100644
--- a/website/docs/en/api/loader-api/rspack-specific-properties.mdx
+++ b/website/docs/en/api/loader-api/rspack-specific-properties.mdx
@@ -1,3 +1,5 @@
+import { ApiMeta } from '@components/ApiMeta';
+
import WebpackLicense from '@components/webpack-license';
@@ -14,8 +16,12 @@ Therefore you should only use them as a last resort. Using them will reduce the
## this.\_compilation
+
+
Access to the current Compilation object of Rspack.
## this.\_compiler
+
+
Access to the current Compiler object of Rspack.
diff --git a/website/docs/en/api/modules/module-methods.mdx b/website/docs/en/api/modules/module-methods.mdx
index 2fb07830f43..a5cde33f659 100644
--- a/website/docs/en/api/modules/module-methods.mdx
+++ b/website/docs/en/api/modules/module-methods.mdx
@@ -98,6 +98,8 @@ import(`./locale/${language}.json`).then(module => {
#### Magic Comments
+
+
Inline comments to make features work. By adding comments to the import, we can do things such as name our chunk or select different modes. For a full list of these magic comments see the code below followed by an explanation of what these comments do.
```js
@@ -180,41 +182,10 @@ delete require.cache[require.resolve('dependency')];
require('dependency') !== d1;
```
-## Data URI Module
-
-Rspack supports importing Data URI modules using the `import` and `require` syntax.
-
-**import**
-
-```js
-import DataURI from 'data:text/javascript,export default 42';
-```
-
-**require**
-
-```js
-require('data:text/javascript,module.exports = 42');
-```
-
-In addition, Base64 encoded requests are also supported:
-
-```js
-const {
- number,
- fn,
-} = require('data:text/javascript;charset=utf-8;base64,ZXhwb3J0IGNvbnN0IG51bWJlciA9IDQyOwpleHBvcnQgZnVuY3Rpb24gZm4oKSB7CiAgcmV0dXJuICJIZWxsbyB3b3JsZCI7Cn0=');
-```
-
-::: tip
-The Data URI module can be used as a method to implement virtual modules, such as combining with a Loader to dynamically load custom modules at runtime.
-:::
-
-## Webpack specific
-
-Aside from the module syntaxes described above, Rspack also support some webpack-specific methods.
-
### require.context
+
+
`require.context` is a function specific to webpack that allows you to dynamically require a set of modules.
You can use `require.context` in your code, and Rspack will parse and reference the matching modules during the build process.
@@ -269,3 +240,32 @@ const context = require.context('./locales', true, /\.json$/, 'lazy');
```
> The arguments passed to `require.context()` must be literals.
+
+## Data URI Module
+
+Rspack supports importing Data URI modules using the `import` and `require` syntax.
+
+**import**
+
+```js
+import DataURI from 'data:text/javascript,export default 42';
+```
+
+**require**
+
+```js
+require('data:text/javascript,module.exports = 42');
+```
+
+In addition, Base64 encoded requests are also supported:
+
+```js
+const {
+ number,
+ fn,
+} = require('data:text/javascript;charset=utf-8;base64,ZXhwb3J0IGNvbnN0IG51bWJlciA9IDQyOwpleHBvcnQgZnVuY3Rpb24gZm4oKSB7CiAgcmV0dXJuICJIZWxsbyB3b3JsZCI7Cn0=');
+```
+
+::: tip
+The Data URI module can be used as a method to implement virtual modules, such as combining with a Loader to dynamically load custom modules at runtime.
+:::
diff --git a/website/docs/en/api/modules/module-variables.mdx b/website/docs/en/api/modules/module-variables.mdx
index 10d710e9cfd..f3d4c20f8fc 100644
--- a/website/docs/en/api/modules/module-variables.mdx
+++ b/website/docs/en/api/modules/module-variables.mdx
@@ -1,6 +1,6 @@
import WebpackLicense from '@components/webpack-license';
import Columns from '@components/Columns';
-import { ApiMeta } from '../../../../components/ApiMeta';
+import { ApiMeta } from '@components/ApiMeta';
@@ -127,6 +127,8 @@ typeof import.meta.url
### import.meta.webpackContext
+
+
`import.meta.webpackContext` is a function specific to webpack that allows you to dynamically import a set of modules.
You can use `import.meta.webpackContext` in your code, and Rspack will parse and reference the matching modules during the build process.
@@ -240,14 +242,18 @@ componentsContext.keys().forEach(fileName => {
`import.meta.webpackContext()` streamlines the process of module importation especially when you have a lot of files to manage. When using it, please avoid matching unnecessary files, as this might lead to significantly increased build time and output size.
-### import.meta.webpackHot (Rspack/Webpack-specific)
+### import.meta.webpackHot
+
+
An alias for [`module.hot`](#modulehot), however `import.meta.webpackHot` can be used in strict ESM while `module.hot` can't.
-## Runtime (Rspack/Webpack-specific)
+## Runtime
### \_\_webpack_hash\_\_
+
+
It provides access to the hash of the compilation.
@@ -268,7 +274,7 @@ __webpack_require__.h = function () {
### \_\_webpack_runtime_id\_\_
-
+
Access the runtime id of current entry.
@@ -288,6 +294,8 @@ __webpack_require__.j = '909';
### \_\_webpack_public_path\_\_
+
+
Equals the configuration option's [`output.publicPath`](/config/output#outputpublicpath)。
@@ -308,7 +316,7 @@ __webpack_require__.p = 'calculated from document/location';
### \_\_webpack_base_uri\_\_
-
+
Get or change base URI at runtime.
@@ -327,7 +335,7 @@ __webpack_require__.b = document.baseURI || self.location.href;
### \_\_webpack_nonce\_\_
-
+
Rspack is capable of adding a nonce to all scripts that it loads.
To activate this feature, set a `__webpack_nonce__` variable and include it in your entry script.
@@ -348,10 +356,12 @@ if (__webpack_require__.nc) {
-## Modules (Rspack/Webpack-specific)
+## Modules
### \_\_webpack_modules\_\_
+
+
Access to the internal object of all modules.
@@ -372,6 +382,8 @@ __webpack_require__.m = __webpack_modules__;
### \_\_webpack_module\_\_
+
+
It provides access to the the current `module`. `module` is not available in strict ESM.
@@ -389,6 +401,8 @@ __webpack_module__
### \_\_webpack_module\_\_.id
+
+
It provides access to the ID of current module (`module.id`). `module` is not available in strict ESM.
@@ -406,6 +420,8 @@ __webpack_module__.id
### \_\_webpack_require\_\_
+
+
The raw require function.
This expression isn't parsed by the Parser for dependencies.
@@ -424,6 +440,8 @@ __webpack_require__('./dep.js')
### \_\_non_webpack_require\_\_
+
+
Generates a `require` function that is not parsed by webpack.
Can be used to do cool stuff with a global require function if available.
@@ -442,7 +460,7 @@ __non_webpack_require__('outer.js')
### \_\_webpack_is_included\_\_
-
+
Test whether or not the given module is bundled by webpack.
@@ -463,6 +481,8 @@ if (true) {
### \_\_resourceQuery
+
+
The resource query of the current module.
If the following `require` call was made, then the query string would be available in `file.js`.
@@ -481,11 +501,11 @@ __resourceQuery
-## Chunks (Rspack/Webpack-specific)
+## Chunks
### \_\_webpack_chunkname\_\_
-
+
Get current chunk name.
@@ -549,27 +569,31 @@ import('./module-a').then(moduleA => {
## Module Federation
-
-
### \_\_webpack_share_scopes\_\_
+
+
This object is used as a shared scope in the remote container and is filled with the provided modules from a host
### \_\_webpack_init_sharing\_\_
+
+
This method is used to initialize modules of a shared scope in the host container.
## System.js
### \_\_system_context\_\_
+
+
Context from System.js when `output.libraryTarget="system"`
## Rspack
### \_\_rspack_version\_\_
-
+
Current Rspack version, default to version in `@rspack/core/package.json`, can be
modified through experiments.rspackFuture.bundlerInfo.version.
@@ -589,7 +613,7 @@ __webpack_require__.rv = '0.7.4';
### \_\_rspack_unique_id\_\_
-
+
The ID of the current bundler, the value is `bundler={bundler}@{version}`: - `bundler`:
Default to `"rspack"` and can be modified through `experiments.rspackFuture.bundlerInfo.bundler`.
- `version`: Default to version in `@rspack/core/package.json` and can be modified
diff --git a/website/docs/en/plugins/rspack/copy-rspack-plugin.mdx b/website/docs/en/plugins/rspack/copy-rspack-plugin.mdx
index e0aead6dc4e..80a2e282d79 100644
--- a/website/docs/en/plugins/rspack/copy-rspack-plugin.mdx
+++ b/website/docs/en/plugins/rspack/copy-rspack-plugin.mdx
@@ -6,7 +6,7 @@ import { ApiMeta } from '@components/ApiMeta.tsx';
# CopyRspackPlugin
-
+
Copies individual files or entire directories, which already exist, to the build directory.
diff --git a/website/docs/en/plugins/rspack/css-extract-rspack-plugin.mdx b/website/docs/en/plugins/rspack/css-extract-rspack-plugin.mdx
index e6f07a54963..f3db0efd84d 100644
--- a/website/docs/en/plugins/rspack/css-extract-rspack-plugin.mdx
+++ b/website/docs/en/plugins/rspack/css-extract-rspack-plugin.mdx
@@ -3,7 +3,7 @@ import { ApiMeta } from '@components/ApiMeta.tsx';
# CssExtractRspackPlugin
-
+
Rspack currently does not support mini-css-extract-plugin, but it can be replaced with this plugin and used in conjunction with css-loader to extract CSS into separate files.
diff --git a/website/docs/en/plugins/rspack/html-rspack-plugin.mdx b/website/docs/en/plugins/rspack/html-rspack-plugin.mdx
index fa36c5135ac..86a27602af2 100644
--- a/website/docs/en/plugins/rspack/html-rspack-plugin.mdx
+++ b/website/docs/en/plugins/rspack/html-rspack-plugin.mdx
@@ -3,7 +3,7 @@ import { ApiMeta } from '@components/ApiMeta.tsx';
# HtmlRspackPlugin
-
+
`rspack.HtmlRspackPlugin` is a high-performance HTML plugin implemented in Rust. You can use it to generate HTML files for Rspack projects.
diff --git a/website/docs/en/plugins/rspack/lightning-css-minimizer-rspack-plugin.mdx b/website/docs/en/plugins/rspack/lightning-css-minimizer-rspack-plugin.mdx
index 46600c0b13c..1380cf628fe 100644
--- a/website/docs/en/plugins/rspack/lightning-css-minimizer-rspack-plugin.mdx
+++ b/website/docs/en/plugins/rspack/lightning-css-minimizer-rspack-plugin.mdx
@@ -2,7 +2,7 @@ import { ApiMeta } from '@components/ApiMeta.tsx';
# LightningCssMinimizerRspackPlugin
-
+
This plugin uses [lightningcss](https://lightningcss.dev/) to minify CSS assets. See [optimization.minimizer](/config/optimization#optimizationminimizer).
diff --git a/website/docs/en/plugins/rspack/swc-css-minimizer-rspack-plugin.mdx b/website/docs/en/plugins/rspack/swc-css-minimizer-rspack-plugin.mdx
index 3b57834f175..bfed9668804 100644
--- a/website/docs/en/plugins/rspack/swc-css-minimizer-rspack-plugin.mdx
+++ b/website/docs/en/plugins/rspack/swc-css-minimizer-rspack-plugin.mdx
@@ -2,7 +2,7 @@ import { ApiMeta } from '@components/ApiMeta.tsx';
# SwcCssMinimizerRspackPlugin
-
+
This plugin can be used to compress CSS assets. See [optimization.minimizer](/config/optimization#optimizationminimizer).
diff --git a/website/docs/en/plugins/rspack/swc-js-minimizer-rspack-plugin.mdx b/website/docs/en/plugins/rspack/swc-js-minimizer-rspack-plugin.mdx
index ba9238c362b..223aec53c3b 100644
--- a/website/docs/en/plugins/rspack/swc-js-minimizer-rspack-plugin.mdx
+++ b/website/docs/en/plugins/rspack/swc-js-minimizer-rspack-plugin.mdx
@@ -2,7 +2,7 @@ import { ApiMeta } from '@components/ApiMeta.tsx';
# SwcJsMinimizerRspackPlugin
-
+
This plugin can be used to compress JS assets. See [optimization.minimizer](/config/optimization#optimizationminimizer).
diff --git a/website/docs/zh/api/loader-api/rspack-specific-properties.mdx b/website/docs/zh/api/loader-api/rspack-specific-properties.mdx
index 9096642ed3d..6549ae01a40 100644
--- a/website/docs/zh/api/loader-api/rspack-specific-properties.mdx
+++ b/website/docs/zh/api/loader-api/rspack-specific-properties.mdx
@@ -1,3 +1,5 @@
+import { ApiMeta } from '@components/ApiMeta';
+
import WebpackLicense from '@components/webpack-license';
@@ -14,8 +16,12 @@ Loader API 提供了所有模块相关的信息。然而,在极少数情况下
## this.\_compilation
+
+
访问Rspack当前的Compilation对象。
## this.\_compiler
+
+
访问Rspack当前的Compiler对象。
diff --git a/website/docs/zh/api/modules/module-variables.mdx b/website/docs/zh/api/modules/module-variables.mdx
index 03a94ee1daf..9f831b1911f 100644
--- a/website/docs/zh/api/modules/module-variables.mdx
+++ b/website/docs/zh/api/modules/module-variables.mdx
@@ -1,6 +1,6 @@
import WebpackLicense from '@components/webpack-license';
import Columns from '@components/Columns';
-import { ApiMeta } from '../../../../components/ApiMeta';
+import { ApiMeta } from '@components/ApiMeta';
@@ -127,7 +127,9 @@ typeof import.meta.url
-### import.meta.webpackContext (Rspack/Webpack 专有)
+### import.meta.webpackContext
+
+
`import.meta.webpackContext` 是 Rspack/Webpack 特有的一个函数,它允许你动态地 import 一组模块。
@@ -238,14 +240,18 @@ componentsContext.keys().forEach(fileName => {
`import.meta.webpackContext()` 简化了模块导入过程,尤其是当你有大量模块需要管理时。在使用时,请避免匹配到不需要的文件,否则可能导致构建时间和产物体积明显增加。
-### import.meta.webpackHot (Rspack/Webpack 专有)
+### import.meta.webpackHot
+
+
[`module.hot`](#modulehot) 的别名,`import.meta.webpackHot` 可以在严格的 ESM 中使用,而 `module.hot` 不能。
-## Runtime (Rspack/Webpack 专有)
+## Runtime
### \_\_webpack_hash\_\_
+
+
提供对编译过程中(compilation)的 hash 信息的访问。
@@ -266,7 +272,7 @@ __webpack_require__.h = function () {
### \_\_webpack_runtime_id\_\_
-
+
访问当前入口的 runtime chunk 的 id。
@@ -286,6 +292,7 @@ __webpack_require__.j = '909';
### \_\_webpack_public_path\_\_
+
等于配置选项的 [output.publicPath](/config/output#outputpublicpath)。
@@ -306,7 +313,7 @@ __webpack_require__.p = '由 document/location 计算得来';
### \_\_webpack_base_uri\_\_
-
+
运行时获取或修改 Base URI。
@@ -325,7 +332,7 @@ __webpack_require__.b = document.baseURI || self.location.href;
### \_\_webpack_nonce\_\_
-
+
Rspack 能够为其加载的所有脚本添加 nonce,即一次性随机数。在入口文件中设置 `__webpack_nonce__` 变量以激活此功能。
@@ -345,10 +352,12 @@ if (__webpack_require__.nc) {
-## Modules (Rspack/Webpack 专有)
+## Modules
### \_\_webpack_modules\_\_
+
+
访问所有模块的内部对象。
@@ -369,6 +378,8 @@ __webpack_require__.m = __webpack_modules__;
### \_\_webpack_module\_\_
+
+
它提供对当前 `module` 的访问。`module` 在 ESM 严格模式下不可用。
@@ -386,6 +397,8 @@ __webpack_module__
### \_\_webpack_module\_\_.id
+
+
它提供对当前 `module`(`module.id`) ID 的访问。`module` 在 ESM 严格模式下不可用。
@@ -403,6 +416,8 @@ __webpack_module__.id
### \_\_webpack_require\_\_
+
+
原始 require 函数。这个表达式不会被解析器解析为依赖。
@@ -420,6 +435,8 @@ __webpack_require__('./dep.js')
### \_\_non_webpack_require\_\_
+
+
生成一个不会被 Rspack 解析的 `require` 函数。配合全局可以获取到的 `require` 函数,可以完成一些酷炫操作。
@@ -437,7 +454,7 @@ __non_webpack_require__('outer.js')
### \_\_webpack_is_included\_\_
-
+
测试给定的模块是否被 Rspack 打包。
@@ -458,6 +475,8 @@ if (true) {
### \_\_resourceQuery
+
+
当前模块的资源查询(resource query)。如果进行了如下的 `require` 调用,那么查询字符串(query string)在 `file.js` 中可用。
```js
@@ -475,11 +494,11 @@ __resourceQuery
-## Chunks (Rspack/Webpack 专有)
+## Chunks
### \_\_webpack_chunkname\_\_
-
+
访问当前 chunk 的名称。
@@ -545,13 +564,13 @@ import('./module-a').then(moduleA => {
### \_\_webpack_share_scopes\_\_
-
+
用于存储 module federation 中的一个远程容器共享作用域 (shared scope) 相关信息。
### \_\_webpack_init_sharing\_\_
-
+
用于初始化 module federation 中的一个远程容器共享作用域 (shared scope) 并加载相关模块。
@@ -559,13 +578,15 @@ import('./module-a').then(moduleA => {
### \_\_system_context\_\_
+
+
可在 `output.libraryTarget="system"` 时获取 System.js 上下文。
## Rspack
### \_\_rspack_version\_\_
-
+
当前使用的 Rspack 版本,默认从 `@rspack/core/package.json` 读取。可以通过 `experiments.rspackFuture.bundlerInfo.version`
修改。
@@ -585,7 +606,7 @@ __webpack_require__.rv = '0.7.4';
### \_\_rspack_unique_id\_\_
-
+
当前打包工具的 ID,为 `{bundler}@{version}`。其中:
diff --git a/website/docs/zh/plugins/rspack/copy-rspack-plugin.mdx b/website/docs/zh/plugins/rspack/copy-rspack-plugin.mdx
index fd7391fde75..cb8c62cdf52 100644
--- a/website/docs/zh/plugins/rspack/copy-rspack-plugin.mdx
+++ b/website/docs/zh/plugins/rspack/copy-rspack-plugin.mdx
@@ -6,7 +6,7 @@ import { ApiMeta } from '@components/ApiMeta.tsx';
# CopyRspackPlugin
-
+
将已存在的单个文件或整个目录复制到产物目录。
diff --git a/website/docs/zh/plugins/rspack/css-extract-rspack-plugin.mdx b/website/docs/zh/plugins/rspack/css-extract-rspack-plugin.mdx
index fc2c30ee53c..268c01d4545 100644
--- a/website/docs/zh/plugins/rspack/css-extract-rspack-plugin.mdx
+++ b/website/docs/zh/plugins/rspack/css-extract-rspack-plugin.mdx
@@ -3,7 +3,7 @@ import { ApiMeta } from '@components/ApiMeta.tsx';
# CssExtractRspackPlugin
-
+
Rspack 目前不兼容 mini-css-extract-plugin,但可以使用该插件替代,和 css-loader 搭配使用,将 CSS 提取成单独文件。
diff --git a/website/docs/zh/plugins/rspack/html-rspack-plugin.mdx b/website/docs/zh/plugins/rspack/html-rspack-plugin.mdx
index eb9e56cde6f..7e2f6d7586c 100644
--- a/website/docs/zh/plugins/rspack/html-rspack-plugin.mdx
+++ b/website/docs/zh/plugins/rspack/html-rspack-plugin.mdx
@@ -3,7 +3,7 @@ import { ApiMeta } from '@components/ApiMeta.tsx';
# HtmlRspackPlugin
-
+
`rspack.HtmlRspackPlugin` 是使用 Rust 实现的高性能 HTML 插件,你可以使用它来为 Rspack 项目生成 HTML 文件。
diff --git a/website/docs/zh/plugins/rspack/lightning-css-minimizer-rspack-plugin.mdx b/website/docs/zh/plugins/rspack/lightning-css-minimizer-rspack-plugin.mdx
index 04df61e3116..8dd11c34559 100644
--- a/website/docs/zh/plugins/rspack/lightning-css-minimizer-rspack-plugin.mdx
+++ b/website/docs/zh/plugins/rspack/lightning-css-minimizer-rspack-plugin.mdx
@@ -2,7 +2,7 @@ import { ApiMeta } from '@components/ApiMeta.tsx';
# LightningCssMinimizerRspackPlugin
-
+
此插件使用 [lightningcss](https://lightningcss.dev/) 来压缩 CSS 产物。参见 [optimization.minimizer](/config/optimization#optimizationminimizer)。
diff --git a/website/docs/zh/plugins/rspack/swc-css-minimizer-rspack-plugin.mdx b/website/docs/zh/plugins/rspack/swc-css-minimizer-rspack-plugin.mdx
index c7d63579ba5..96bc296c8eb 100644
--- a/website/docs/zh/plugins/rspack/swc-css-minimizer-rspack-plugin.mdx
+++ b/website/docs/zh/plugins/rspack/swc-css-minimizer-rspack-plugin.mdx
@@ -2,7 +2,7 @@ import { ApiMeta } from '@components/ApiMeta.tsx';
# SwcCssMinimizerRspackPlugin
-
+
此插件可以用来压缩 CSS 产物。参见 [optimization.minimizer](/config/optimization#optimizationminimizer)。
diff --git a/website/docs/zh/plugins/rspack/swc-js-minimizer-rspack-plugin.mdx b/website/docs/zh/plugins/rspack/swc-js-minimizer-rspack-plugin.mdx
index 437726c8859..91198eb5e16 100644
--- a/website/docs/zh/plugins/rspack/swc-js-minimizer-rspack-plugin.mdx
+++ b/website/docs/zh/plugins/rspack/swc-js-minimizer-rspack-plugin.mdx
@@ -2,7 +2,7 @@ import { ApiMeta } from '@components/ApiMeta.tsx';
# SwcJsMinimizerRspackPlugin
-
+
此插件可以用来压缩 JS 产物。参见 [optimization.minimizer](/config/optimization#optimizationminimizer)。