From 34339d5e12a16665d53d52e28e096efed67de81e Mon Sep 17 00:00:00 2001 From: 9aoy Date: Fri, 18 Oct 2024 17:34:35 +0800 Subject: [PATCH] feat: add appendRules util to `tools.rspack` config (#3755) Co-authored-by: neverland --- packages/core/src/provider/rspackConfig.ts | 11 +++++ packages/core/src/types/config.ts | 1 + packages/core/src/types/plugin.ts | 1 + .../tests/__snapshots__/default.test.ts.snap | 4 ++ packages/core/tests/default.test.ts | 7 +++- website/docs/en/config/tools/rspack.mdx | 40 +++++++++++++++++-- website/docs/zh/config/tools/rspack.mdx | 40 +++++++++++++++++-- 7 files changed, 95 insertions(+), 9 deletions(-) diff --git a/packages/core/src/provider/rspackConfig.ts b/packages/core/src/provider/rspackConfig.ts index e4ca7f040..9078fc7de 100644 --- a/packages/core/src/provider/rspackConfig.ts +++ b/packages/core/src/provider/rspackConfig.ts @@ -63,6 +63,17 @@ export async function getConfigUtils( config.module.rules.unshift(...ruleArr); }, + appendRules(rules) { + const ruleArr = castArray(rules); + if (!config.module) { + config.module = {}; + } + if (!config.module.rules) { + config.module.rules = []; + } + config.module.rules.push(...ruleArr); + }, + prependPlugins(plugins) { const pluginArr = castArray(plugins); if (!config.plugins) { diff --git a/packages/core/src/types/config.ts b/packages/core/src/types/config.ts index c2d47a7bc..ff8c8452c 100644 --- a/packages/core/src/types/config.ts +++ b/packages/core/src/types/config.ts @@ -76,6 +76,7 @@ export type ToolsHtmlPluginConfig = ConfigChainWithContext< export type ModifyRspackConfigUtils = ModifyChainUtils & { addRules: (rules: RspackRule | RspackRule[]) => void; + appendRules: (rules: RspackRule | RspackRule[]) => void; prependPlugins: ( plugins: BundlerPluginInstance | BundlerPluginInstance[], ) => void; diff --git a/packages/core/src/types/plugin.ts b/packages/core/src/types/plugin.ts index fd3994042..60e3e0c38 100644 --- a/packages/core/src/types/plugin.ts +++ b/packages/core/src/types/plugin.ts @@ -90,6 +90,7 @@ export type ModifyWebpackChainUtils = ModifyChainUtils & { export type ModifyWebpackConfigUtils = ModifyWebpackChainUtils & { addRules: (rules: RuleSetRule | RuleSetRule[]) => void; + appendRules: (rules: RuleSetRule | RuleSetRule[]) => void; prependPlugins: ( plugins: WebpackPluginInstance | WebpackPluginInstance[], ) => void; diff --git a/packages/core/tests/__snapshots__/default.test.ts.snap b/packages/core/tests/__snapshots__/default.test.ts.snap index 039e811cb..deed34876 100644 --- a/packages/core/tests/__snapshots__/default.test.ts.snap +++ b/packages/core/tests/__snapshots__/default.test.ts.snap @@ -1440,6 +1440,10 @@ exports[`tools.rspack > should match snapshot 1`] = ` "test": /\\\\\\.wasm\\$/, "type": "asset/resource", }, + { + "loader": "foo-loader", + "test": /\\\\\\.foo/, + }, ], }, "name": "web", diff --git a/packages/core/tests/default.test.ts b/packages/core/tests/default.test.ts index e0355c052..a33205358 100644 --- a/packages/core/tests/default.test.ts +++ b/packages/core/tests/default.test.ts @@ -58,7 +58,7 @@ describe('tools.rspack', () => { const rsbuild = await createStubRsbuild({ rsbuildConfig: { tools: { - rspack: (_config, { addRules, prependPlugins }) => { + rspack: (_config, { addRules, prependPlugins, appendRules }) => { addRules({ test: /\.test$/, use: [ @@ -67,6 +67,11 @@ describe('tools.rspack', () => { }, ], }); + appendRules({ + test: /\.foo/, + loader: 'foo-loader', + }); + prependPlugins([new TestPlugin()]); }, }, diff --git a/website/docs/en/config/tools/rspack.mdx b/website/docs/en/config/tools/rspack.mdx index 181f9295b..ce562ad3b 100644 --- a/website/docs/en/config/tools/rspack.mdx +++ b/website/docs/en/config/tools/rspack.mdx @@ -235,7 +235,9 @@ export default { - **Type:** `(rules: RuleSetRule | RuleSetRule[]) => void` -Add additional [Rspack rules](https://rspack.dev/config/module#modulerules). +Add additional [Rspack rules](https://rspack.dev/config/module#modulerules) to the head of the internal Rspack module rules array. + +It should be noted that Rspack loaders will be executed in right-to-left order. If you want the loader you added to be executed before other loaders (Normal Phase), you should use [appendRules](#appendrules) to add the rule to the end. For example: @@ -265,9 +267,39 @@ export default { }; ``` -:::tip -The `addRules(...)` method will prepend rules to Rspack rule list. To append rules, use `config.module.rules.push(...)` instead. -::: +### appendRules + +- **Type:** `(rules: RuleSetRule | RuleSetRule[]) => void` + +Add additional [Rspack rules](https://rspack.dev/config/module#modulerules) to the end of the internal Rspack module rules array. + +For example: + +```ts +export default { + tools: { + rspack: (config, { appendRules }) => { + // add a single rule + appendRules({ + test: /\.foo/, + loader: require.resolve('foo-loader'), + }); + + // Add multiple rules as an array + appendRules([ + { + test: /\.foo/, + loader: require.resolve('foo-loader'), + }, + { + test: /\.bar/, + loader: require.resolve('bar-loader'), + }, + ]); + }, + }, +}; +``` ### prependPlugins diff --git a/website/docs/zh/config/tools/rspack.mdx b/website/docs/zh/config/tools/rspack.mdx index 30845dab1..46d35bef8 100644 --- a/website/docs/zh/config/tools/rspack.mdx +++ b/website/docs/zh/config/tools/rspack.mdx @@ -235,7 +235,9 @@ export default { - **类型：** `(rules: RuleSetRule | RuleSetRule[]) => void` -添加额外的 [Rspack rules](https://rspack.dev/config/module#modulerules)。 +添加额外的 [Rspack rules](https://rspack.dev/config/module#modulerules) 到 Rspack rules 列表的最前面。 + +需要注意的是，Rspack loaders 会按照从右到左的顺序执行，如果你希望你添加的 loader（Normal Phase）先于其他 loader 执行，应使用 [appendRules](#appendrules) 将该规则添加到最后面。 示例： @@ -265,9 +267,39 @@ export default { }; ``` -:::tip -`addRules(...)` 会将新规则插入到 Rspack rules 列表的最前面。如果想要在末尾插入新规则，请改用 `config.module.rules.push(...)`。 -::: +### appendRules + +- **类型：** `(rules: RuleSetRule | RuleSetRule[]) => void` + +添加额外的 [Rspack rules](https://rspack.dev/config/module#modulerules) 到 Rspack rules 列表的最后面。 + +示例： + +```ts +export default { + tools: { + rspack: (config, { appendRules }) => { + // 追加单条规则 + appendRules({ + test: /\.foo/, + loader: require.resolve('foo-loader'), + }); + + // 以数组形式追加多条规则 + appendRules([ + { + test: /\.foo/, + loader: require.resolve('foo-loader'), + }, + { + test: /\.bar/, + loader: require.resolve('bar-loader'), + }, + ]); + }, + }, +}; +``` ### prependPlugins