Skip to content

Commit

Permalink
docs: tools.cssExtract & tools.cssLoader supported in rspack (#5781)
Browse files Browse the repository at this point in the history
  • Loading branch information
9aoy committed May 29, 2024
1 parent bd8f750 commit 9fa102a
Show file tree
Hide file tree
Showing 6 changed files with 8 additions and 162 deletions.
37 changes: 2 additions & 35 deletions packages/document/builder-doc/docs/en/config/tools/cssExtract.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,39 +16,6 @@ const defaultOptions = {
};
```

- **Bundler:** `only support webpack`
The config of [CssExtractRspackPlugin](https://www.rspack.dev/plugins/rspack/css-extract-rspack-plugin) / [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) can be modified through `tools.cssExtract`.

The config of [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) can be modified through `tools.cssExtract`.

### Object Type

When this value is an Object, it is merged with the default config via Object.assign. For example:

```js
export default {
tools: {
cssExtract: {
pluginOptions: {
filename: 'static/css/[name].[contenthash:8].css',
},
},
},
};
```

### Function Type

When the value a Function, the default config is passed in as the first parameter. You can modify the config object directly, or return an object as the final config. For example:

```js
export default {
tools: {
cssExtract: config => {
config.pluginOptions.filename = 'static/css/[name].[contenthash:8].css';
return config;
},
},
};
```

For more config details, please refer to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).
For detailed usage, please refer to [Rsbuild - tools.cssExtract](https://rsbuild.dev/config/tools/css-extract).
37 changes: 1 addition & 36 deletions packages/document/builder-doc/docs/en/config/tools/cssLoader.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,39 +20,4 @@ The config of [css-loader](https://github.com/webpack-contrib/css-loader) can be
}
```

:::tip
When using Rspack as the bundler, this configuration is only supported when set [disableCssExtract](https://modernjs.dev/builder/en/api/config-output.html#outputdisablecssextract) is true.

To modify CSS Modules configuration, it is recommended to use the [output.cssModules](https://modernjs.dev/builder/en/api/config-output.html#outputcssmodules) configuration.
:::

### Object Type

When this value is an Object, it is merged with the default config via deep merge. For example:

```js
export default {
tools: {
cssLoader: {
modules: {
exportOnlyLocals: true,
},
},
},
};
```

### Function Type

When the value is a Function, the default config is passed in as the first parameter. You can modify the config object directly, or return an object as the final config. For example:

```js
export default {
tools: {
cssLoader: config => {
config.modules.exportOnlyLocals = true;
return config;
},
},
};
```
For detailed usage, please refer to [Rsbuild - tools.cssLoader](https://rsbuild.dev/config/tools/css-loader).
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,6 @@ Currently, most of configuration options in Builder have been adapted for Rspack
Unsupported configurations and capabilities include:

- [source.include](/api/config-source.html#sourceinclude) ([track issue](https://github.com/web-infra-dev/rspack/issues/3067))
- [source.exclude](/api/config-source.html#sourceexclude) ([track issue](https://github.com/web-infra-dev/rspack/issues/3067))
- [source.moduleScopes](/api/config-source.html#sourcemodulescopes) ([track issue](https://github.com/web-infra-dev/rspack/issues/3548))

#### Html Config
Expand All @@ -84,10 +82,7 @@ All configurations and capabilities under dev are available within rspack.

> Output related configurations in Builder.
Unsupported configurations and capabilities include:

- [output.enableInlineScripts](/api/config-output.html#outputenableinlinescripts)
- [output.polyfill.usage](/api/config-output.html#usage) ([track issue](https://github.com/web-infra-dev/rspack/issues/3067))
All configurations and capabilities under output are available within rspack.

#### Experiments Config

Expand All @@ -102,7 +97,6 @@ All configurations and capabilities under experimental are available within rspa
Unsupported configurations and capabilities include:

- [performance.buildCache](/api/config-performance.html#performancebuildcache)
- [performance.chunkSplit (split-by-module)](/api/config-performance.html#performancechunksplit)

#### Tools Config

Expand All @@ -111,9 +105,6 @@ Unsupported configurations and capabilities include:
Unsupported configurations and capabilities include:

- [tools.terser](/api/config-tools.html#toolsterser)
- [tools.cssExtract](/api/config-tools.html#toolscssextract)
- [tools.cssLoader](/api/config-tools.html#toolscssloader) (Only supported when [disableCssExtract](/api/config-output.html#outputdisablecssextract) is true)
- [tools.styledComponents](/api/config-tools.html#toolsstyledcomponents)
- [tools.tsLoader](/api/config-tools.html#toolstsloader)
- [tools.webpack](/api/config-tools.html#toolswebpack):use [tools.rspack](/api/config-tools#toolsrspack) instead.
- [tools.webpackChain](/api/config-tools.html#toolswebpackchain):use [tools.bundlerChain](/api/config-tools#toolsbundlerchain) instead.
Expand Down
37 changes: 2 additions & 35 deletions packages/document/builder-doc/docs/zh/config/tools/cssExtract.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,39 +15,6 @@ const defaultOptions = {
};
```

- **打包工具:** `仅支持 webpack`
通过 `tools.cssExtract` 可以更改 [CssExtractRspackPlugin](https://www.rspack.dev/zh/plugins/rspack/css-extract-rspack-plugin)[mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) 的配置。

通过 `tools.cssExtract` 可以更改 [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) 的配置。

### Object 类型

当此值为 Object 类型时,与默认配置通过 Object.assign 合并。比如:

```js
export default {
tools: {
cssExtract: {
pluginOptions: {
filename: 'static/css/[name].[contenthash:8].css',
},
},
},
};
```

### Function 类型

当此值为 Function 类型时,默认配置作为第一个参数传入,你可以直接修改配置对象,也可以返回一个对象作为最终配置。比如:

```js
export default {
tools: {
cssExtract: config => {
config.pluginOptions.filename = 'static/css/[name].[contenthash:8].css';
return config;
},
},
};
```

更多配置细节可参考 [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin)
详细用法可参考 [Rsbuild - tools.cssExtract](https://rsbuild.dev/zh/config/tools/css-extract)
37 changes: 1 addition & 36 deletions packages/document/builder-doc/docs/zh/config/tools/cssLoader.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,39 +20,4 @@
}
```

:::tip
在使用 Rspack 作为打包工具时,仅支持在 [disableCssExtract](https://modernjs.dev/builder/api/config-output.html#outputdisablecssextract) 时使用该配置。

修改 CSS Modules 相关配置,推荐使用 [output.cssModules](https://modernjs.dev/builder/api/config-output.html#outputcssmodules) 配置项。
:::

### Object 类型

当此值为 Object 类型时,会与默认配置进行深层合并 (deep merge)。比如:

```js
export default {
tools: {
cssLoader: {
modules: {
exportOnlyLocals: true,
},
},
},
};
```

### Function 类型

当此值为 Function 类型时,默认配置作为第一个参数传入,你可以直接修改配置对象,也可以返回一个对象作为最终配置。比如:

```js
export default {
tools: {
cssLoader: config => {
config.modules.exportOnlyLocals = true;
return config;
},
},
};
```
详细用法可参考 [Rsbuild - tools.cssLoader](https://rsbuild.dev/zh/config/tools/css-loader)
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,6 @@ Builder 旨在消除不同打包工具之间的主要差异,帮助用户以较
不支持的配置项及能力包括:

- [source.include](/api/config-source.html#sourceinclude) ([issue 追踪](https://github.com/web-infra-dev/rspack/issues/3067))
- [source.exclude](/api/config-source.html#sourceexclude) ([issue 追踪](https://github.com/web-infra-dev/rspack/issues/3067))
- [source.moduleScopes](/api/config-source.html#sourcemodulescopes) ([issue 追踪](https://github.com/web-infra-dev/rspack/issues/3548))

#### Html Config
Expand All @@ -84,10 +82,7 @@ Builder 旨在消除不同打包工具之间的主要差异,帮助用户以较

> Builder 中与构建产物有关的配置。
不支持的配置项及能力包括:

- [output.enableInlineScripts](/api/config-output.html#outputenableinlinescripts)
- [output.polyfill.usage](/api/config-output.html#usage) ([issue 追踪](https://github.com/web-infra-dev/rspack/issues/3067))
所有 output 下的配置项及能力在 Rspack 内均可使用。

#### Experiments Config

Expand All @@ -102,7 +97,6 @@ Builder 旨在消除不同打包工具之间的主要差异,帮助用户以较
不支持的配置项及能力包括:

- [performance.buildCache](/api/config-performance.html#performancebuildcache)
- [performance.chunkSplit (split-by-module)](/api/config-performance.html#performancechunksplit)

#### Tools Config

Expand All @@ -111,9 +105,6 @@ Builder 旨在消除不同打包工具之间的主要差异,帮助用户以较
不支持的配置项包括:

- [tools.terser](/api/config-tools.html#toolsterser)
- [tools.cssExtract](/api/config-tools.html#toolscssextract)
- [tools.cssLoader](/api/config-tools.html#toolscssloader) (仅在 [disableCssExtract](/api/config-output.html#outputdisablecssextract) 时支持)
- [tools.styledComponents](/api/config-tools.html#toolsstyledcomponents)
- [tools.tsLoader](/api/config-tools.html#toolstsloader)
- [tools.webpack](/api/config-tools.html#toolswebpack):使用 [tools.rspack](/api/config-tools#toolsrspack) 代替。
- [tools.webpackChain](/api/config-tools.html#toolswebpackchain):使用 [tools.bundlerChain](/api/config-tools#toolsbundlerchain) 代替。
Expand Down

0 comments on commit 9fa102a

Please sign in to comment.