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)。