feat(core): add distPath.assets and filename.assets

e2e/cases/emit-assets/index.test.ts

@@ -1,6 +1,10 @@
 import { build } from '@e2e/helper';
 import { expect, test } from '@playwright/test';
 
+function isIncludeFile(filenames: string[], includeFilename: string) {
+  return filenames.some((filename) => filename.includes(includeFilename));
+}
+
 test('should allow to disable emit assets for node target', async () => {
   const rsbuild = await build({
     cwd: __dirname,
@@ -9,15 +13,24 @@ test('should allow to disable emit assets for node target', async () => {
   const files = await rsbuild.unwrapOutputJSON();
   const filenames = Object.keys(files);
 
+  expect(isIncludeFile(filenames, 'dist/static/image/icon.png')).toBeTruthy();
+
   expect(
-    filenames.some((filename) =>
-      filename.includes('dist/static/image/icon.png'),
-    ),
-  ).toBeTruthy();
+    isIncludeFile(filenames, 'dist/server/static/image/icon.png'),
+  ).toBeFalsy();
+});
+
+test('should allow to disable emit assets for json assets', async () => {
+  const rsbuild = await build({
+    cwd: __dirname,
+  });
+
+  const files = await rsbuild.unwrapOutputJSON();
+  const filenames = Object.keys(files);
+
+  expect(isIncludeFile(filenames, 'dist/static/assets/test.json')).toBeTruthy();
 
   expect(
-    filenames.some((filename) =>
-      filename.includes('dist/server/static/image/icon.png'),
-    ),
+    isIncludeFile(filenames, 'dist/server/static/assets/test.json'),
   ).toBeFalsy();
 });

e2e/cases/emit-assets/src/assets/test.json

@@ -0,0 +1,3 @@
+{
+  "a": 1
+}

e2e/cases/emit-assets/src/index.js

@@ -1,3 +1,5 @@
 import small from '../../../assets/icon.png?url';
+const testJson = new URL('./assets/test.json', import.meta.url).href;
 
 console.log(small);
+console.log(testJson);

packages/compat/webpack/tests/__snapshots__/default.test.ts.snap

@@ -227,6 +227,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = `
     },
   },
   "output": {
+    "assetModuleFilename": "static/assets/[name].[contenthash:8][ext]",
     "chunkFilename": "static/js/async/[name].js",
     "devtoolModuleFilenameTemplate": [Function],
     "filename": "static/js/[name].js",
@@ -592,6 +593,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when produ
     },
   },
   "output": {
+    "assetModuleFilename": "static/assets/[name].[contenthash:8][ext]",
     "chunkFilename": "static/js/async/[name].[contenthash:8].js",
     "filename": "static/js/[name].[contenthash:8].js",
     "hashFunction": "xxhash64",
@@ -956,6 +958,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe
     "splitChunks": false,
   },
   "output": {
+    "assetModuleFilename": "static/assets/[name].[contenthash:8][ext]",
     "chunkFilename": "[name].js",
     "filename": "[name].js",
     "hashFunction": "xxhash64",
@@ -1252,6 +1255,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe
     "splitChunks": false,
   },
   "output": {
+    "assetModuleFilename": "static/assets/[name].[contenthash:8][ext]",
     "chunkFilename": "static/js/async/[name].[contenthash:8].js",
     "filename": "static/js/[name].[contenthash:8].js",
     "hashFunction": "xxhash64",

packages/core/src/config.ts

@@ -4,6 +4,7 @@ import type { WatchOptions } from 'chokidar';
 import color from 'picocolors';
 import RspackChain from 'rspack-chain';
 import {
+  ASSETS_DIST_DIR,
   CSS_DIST_DIR,
   DEFAULT_ASSET_PREFIX,
   DEFAULT_DATA_URL_SIZE,
@@ -141,6 +142,7 @@ const getDefaultOutputConfig = (): NormalizedOutputConfig => ({
     wasm: WASM_DIST_DIR,
     image: IMAGE_DIST_DIR,
     media: MEDIA_DIST_DIR,
+    assets: ASSETS_DIST_DIR,
   },
   // Temporary placeholder, default: `${server.base}`
   assetPrefix: DEFAULT_ASSET_PREFIX,

packages/core/src/constants.ts

@@ -11,6 +11,7 @@ export const FONT_DIST_DIR = 'static/font';
 export const WASM_DIST_DIR = 'static/wasm';
 export const IMAGE_DIST_DIR = 'static/image';
 export const MEDIA_DIST_DIR = 'static/media';
+export const ASSETS_DIST_DIR = 'static/assets';
 export const LOADER_PATH: string = join(__dirname);
 export const STATIC_PATH: string = join(__dirname, '../static');
 export const COMPILED_PATH: string = join(__dirname, '../compiled');

packages/core/src/helpers/index.ts

@@ -255,6 +255,8 @@ export function getFilename(
       return filename.image ?? `[name]${hash}[ext]`;
     case 'media':
       return filename.media ?? `[name]${hash}[ext]`;
+    case 'assets':
+      return filename.assets ?? `[name]${hash}[ext]`;
     default:
       throw new Error(`unknown key ${type} in "output.filename"`);
   }

packages/core/src/plugins/asset.ts

@@ -76,14 +76,20 @@ export const pluginAsset = (): RsbuildPlugin => ({
     api.modifyBundlerChain((chain, { isProd, environment }) => {
       const { config } = environment;
 
+      const getMergedFilename = (
+        assetType: 'svg' | 'font' | 'image' | 'media' | 'assets',
+      ) => {
+        const distDir = config.output.distPath[assetType];
+        const filename = getFilename(config, assetType, isProd);
+        return path.posix.join(distDir, filename);
+      };
+
       const createAssetRule = (
-        assetType: 'image' | 'media' | 'font' | 'svg',
+        assetType: 'svg' | 'font' | 'image' | 'media',
         exts: string[],
         emit: boolean,
       ) => {
         const regExp = getRegExpForExts(exts);
-        const distDir = config.output.distPath[assetType];
-        const filename = getFilename(config, assetType, isProd);
         const { dataUriLimit } = config.output;
         const maxSize =
           typeof dataUriLimit === 'number'
@@ -95,21 +101,31 @@ export const pluginAsset = (): RsbuildPlugin => ({
           emit,
           rule,
           maxSize,
-          filename: path.posix.join(distDir, filename),
+          filename: getMergedFilename(assetType),
           assetType,
         });
       };
 
       const { emitAssets } = config.output;
 
+      // image
       createAssetRule('image', IMAGE_EXTENSIONS, emitAssets);
+      // svg
       createAssetRule('svg', ['svg'], emitAssets);
+      // media
       createAssetRule(
         'media',
         [...VIDEO_EXTENSIONS, ...AUDIO_EXTENSIONS],
         emitAssets,
       );
+      // font
       createAssetRule('font', FONT_EXTENSIONS, emitAssets);
+      // assets
+      const assetsFilename = getMergedFilename('assets');
+      chain.output.assetModuleFilename(assetsFilename);
+      if (!emitAssets) {
+        chain.module.generator.merge({ 'asset/resource': { emit: false } });
+      }
     });
   },
 });

packages/core/src/types/config.ts

@@ -652,6 +652,11 @@ export type DistPathConfig = {
    * @default 'static/media'
    */
   media?: string;
+  /**
+   * The output directory of assets, except for above (image, svg, font, html, wasm...)
+   * @default 'static/assets'
+   */
+  assets?: string;
 };
 
 export type FilenameConfig = {
@@ -694,6 +699,11 @@ export type FilenameConfig = {
    * @default '[name].[contenthash:8][ext]'
    */
   media?: string;
+  /**
+   * the name of other assets, except for above (image, svg, font, html, wasm...)
+   * @default '[name].[contenthash:8][ext]'
+   */
+  assets?: string;
 };
 
 export type DataUriLimit = {

packages/core/tests/__snapshots__/asset.test.ts.snap

@@ -114,6 +114,9 @@ exports[`plugin-asset > should add image rules correctly 1`] = `
       },
     ],
   },
+  "output": {
+    "assetModuleFilename": "static/assets/[name].[contenthash:8][ext]",
+  },
   "plugins": [
     RsbuildCorePlugin {},
   ],
@@ -234,6 +237,9 @@ exports[`plugin-asset > should add image rules correctly 2`] = `
       },
     ],
   },
+  "output": {
+    "assetModuleFilename": "static/assets/[name].[contenthash:8][ext]",
+  },
   "plugins": [
     RsbuildCorePlugin {},
   ],
@@ -354,6 +360,9 @@ exports[`plugin-asset > should allow to use distPath.image to modify dist path 1
       },
     ],
   },
+  "output": {
+    "assetModuleFilename": "static/assets/[name].[contenthash:8][ext]",
+  },
   "plugins": [
     RsbuildCorePlugin {},
   ],
@@ -474,6 +483,9 @@ exports[`plugin-asset > should allow to use filename.image to modify filename 1`
       },
     ],
   },
+  "output": {
+    "assetModuleFilename": "static/assets/[name].[contenthash:8][ext]",
+  },
   "plugins": [
     RsbuildCorePlugin {},
   ],

packages/core/tests/__snapshots__/builder.test.ts.snap

@@ -291,6 +291,7 @@ exports[`should use rspack as default bundler > apply rspack correctly 1`] = `
     },
   },
   "output": {
+    "assetModuleFilename": "static/assets/[name].[contenthash:8][ext]",
     "chunkFilename": "static/js/async/[name].js",
     "devtoolModuleFilenameTemplate": [Function],
     "filename": "static/js/[name].js",

packages/core/tests/__snapshots__/default.test.ts.snap

@@ -291,6 +291,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = `
     },
   },
   "output": {
+    "assetModuleFilename": "static/assets/[name].[contenthash:8][ext]",
     "chunkFilename": "static/js/async/[name].js",
     "devtoolModuleFilenameTemplate": [Function],
     "filename": "static/js/[name].js",
@@ -718,6 +719,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when prod
     },
   },
   "output": {
+    "assetModuleFilename": "static/assets/[name].[contenthash:8][ext]",
     "chunkFilename": "static/js/async/[name].[contenthash:8].js",
     "filename": "static/js/[name].[contenthash:8].js",
     "hashFunction": "xxhash64",
@@ -1103,6 +1105,7 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe
     "splitChunks": false,
   },
   "output": {
+    "assetModuleFilename": "static/assets/[name].[contenthash:8][ext]",
     "chunkFilename": "[name].js",
     "filename": "[name].js",
     "hashFunction": "xxhash64",
@@ -1454,6 +1457,7 @@ exports[`tools.rspack > should match snapshot 1`] = `
     },
   },
   "output": {
+    "assetModuleFilename": "static/assets/[name].[contenthash:8][ext]",
     "chunkFilename": "static/js/async/[name].js",
     "devtoolModuleFilenameTemplate": [Function],
     "filename": "static/js/[name].js",

packages/core/tests/__snapshots__/environments.test.ts.snap

@@ -49,6 +49,7 @@ exports[`environment config > should normalize environment config correctly 1`]
       "svg": 4096,
     },
     "distPath": {
+      "assets": "static/assets",
       "css": "static/css",
       "font": "static/font",
       "html": "./",
@@ -176,6 +177,7 @@ exports[`environment config > should normalize environment config correctly 2`]
       "svg": 4096,
     },
     "distPath": {
+      "assets": "static/assets",
       "css": "static/css",
       "font": "static/font",
       "html": "./",
@@ -303,6 +305,7 @@ exports[`environment config > should print environment config when inspect confi
         "svg": 4096,
       },
       "distPath": {
+        "assets": "static/assets",
         "css": "static/css",
         "font": "static/font",
         "html": "./",
@@ -461,6 +464,7 @@ exports[`environment config > should print environment config when inspect confi
         "svg": 4096,
       },
       "distPath": {
+        "assets": "static/assets",
         "css": "static/css",
         "font": "static/font",
         "html": "./",
@@ -637,6 +641,7 @@ exports[`environment config > should support modify environment config by api.mo
         "svg": 4096,
       },
       "distPath": {
+        "assets": "static/assets",
         "css": "static/css",
         "font": "static/font",
         "html": "./",
@@ -796,6 +801,7 @@ exports[`environment config > should support modify environment config by api.mo
         "svg": 4096,
       },
       "distPath": {
+        "assets": "static/assets",
         "css": "static/css",
         "font": "static/font",
         "html": "./",
@@ -956,6 +962,7 @@ exports[`environment config > should support modify environment config by api.mo
         "svg": 4096,
       },
       "distPath": {
+        "assets": "static/assets",
         "css": "static/css",
         "font": "static/font",
         "html": "./",
@@ -1119,6 +1126,7 @@ exports[`environment config > should support modify single environment config by
         "svg": 4096,
       },
       "distPath": {
+        "assets": "static/assets",
         "css": "static/css",
         "font": "static/font",
         "html": "./",
@@ -1278,6 +1286,7 @@ exports[`environment config > should support modify single environment config by
         "svg": 4096,
       },
       "distPath": {
+        "assets": "static/assets",
         "css": "static/css",
         "font": "static/font",
         "html": "./",
@@ -1681,6 +1690,7 @@ exports[`environment config > tools.rspack / bundlerChain can be configured in e
       },
     },
     "output": {
+      "assetModuleFilename": "static/assets/[name].[contenthash:8][ext]",
       "chunkFilename": "static/js/async/[name].js",
       "devtoolModuleFilenameTemplate": [Function],
       "filename": "static/js/[name].js",
@@ -2008,6 +2018,7 @@ exports[`environment config > tools.rspack / bundlerChain can be configured in e
       "splitChunks": false,
     },
     "output": {
+      "assetModuleFilename": "static/assets/[name].[contenthash:8][ext]",
       "chunkFilename": "[name].js",
       "devtoolModuleFilenameTemplate": [Function],
       "filename": "bundle.js",

website/docs/en/config/output/dist-path.mdx

@@ -15,6 +15,7 @@ type DistPathConfig = {
   wasm?: string;
   image?: string;
   media?: string;
+  assets?: string;
 };
 ```
 
@@ -33,6 +34,7 @@ const defaultDistPath = {
   wasm: 'static/wasm',
   image: 'static/image',
   media: 'static/media',
+  assets: 'static/assets',
 };
 ```
 
@@ -51,6 +53,7 @@ Detail:
 - `wasm`: The output directory of WebAssembly files.
 - `image`: The output directory of non-SVG images.
 - `media`: The output directory of media assets, such as videos.
+- `assets`: The output directory of assets except the types mentioned above, which also match [Asset Modules](https://rspack.dev/guide/features/asset-module).
 
 ### Root Directory