feat(builder): support output.enableAssetManifest in Rspack (#3721)

feat(builder): support output.enableAssetManifest in Rspack

Author: 9aoy

.changeset/tame-berries-exercise.md

@@ -0,0 +1,8 @@
+---
+'@modern-js/builder-rspack-provider': patch
+---
+
+feat(builder): support output.enableAssetManifest in Rspack
+
+
+feat(builder): 在使用 Rspack 构建时支持 output.enableAssetManifest 配置项

packages/builder/builder-rspack-provider/package.json

@@ -61,6 +61,7 @@
     "@rspack/dev-middleware": "0.0.0-canary-22b006c-20230517164249",
     "@rspack/plugin-html": "0.0.0-canary-22b006c-20230517164249",
     "@rspack/postcss-loader": "0.0.0-canary-22b006c-20230517164249",
+    "rspack-manifest-plugin": "5.0.0-alpha0",
     "caniuse-lite": "^1.0.30001451",
     "core-js": "~3.30.0",
     "rspack-plugin-virtual-module": "0.1.0"

packages/builder/builder-rspack-provider/src/plugins/manifest.ts

@@ -0,0 +1,27 @@
+import type { BuilderPlugin } from '../types';
+import { generateManifest } from '@modern-js/builder-shared';
+
+export const builderPluginManifest = (): BuilderPlugin => ({
+  name: 'builder-plugin-manifest',
+
+  setup(api) {
+    api.modifyBundlerChain(async (chain, { CHAIN_ID }) => {
+      const config = api.getNormalizedConfig();
+
+      if (!config.output.enableAssetManifest) {
+        return;
+      }
+
+      const { WebpackManifestPlugin } = await import('rspack-manifest-plugin');
+      const publicPath = chain.output.get('publicPath');
+
+      chain.plugin(CHAIN_ID.PLUGIN.MANIFEST).use(WebpackManifestPlugin, [
+        {
+          fileName: 'asset-manifest.json',
+          publicPath,
+          generate: generateManifest,
+        },
+      ]);
+    });
+  },
+});

packages/builder/builder-rspack-provider/src/shared/plugin.ts

@@ -28,6 +28,7 @@ export const applyDefaultPlugins = (plugins: Plugins) =>
     import('../plugins/less').then(m => m.builderPluginLess()),
     import('../plugins/sass').then(m => m.builderPluginSass()),
     import('../plugins/minimize').then(m => m.builderPluginMinimize()),
+    import('../plugins/manifest').then(m => m.builderPluginManifest()),
     // rem should after css/less/sass/stylus
     import('../plugins/rem').then(m => m.builderPluginRem()),
     import('../plugins/hmr').then(m => m.builderPluginHMR()),

packages/builder/builder-shared/src/index.ts

@@ -26,3 +26,4 @@ export * from './fallback';
 export * from './getLoaderOptions';
 export * from './svgo';
 export * from './patch';
+export * from './manifest';

packages/builder/builder-shared/src/manifest.ts

@@ -0,0 +1,29 @@
+import type { Chunk } from 'webpack';
+
+export const generateManifest = (
+  seed: Record<string, any>,
+  files: Array<{
+    chunk?: Chunk;
+    name: string;
+    path: string;
+  }>,
+  entries: Record<string, string[]>,
+) => {
+  const manifestFiles = files.reduce((manifest, file) => {
+    manifest[file.name] = file.path;
+    return manifest;
+  }, seed);
+
+  const entrypointFiles = Object.keys(entries).reduce<string[]>(
+    (previous, name) =>
+      previous.concat(
+        entries[name].filter(fileName => !fileName.endsWith('.map')),
+      ),
+    [],
+  );
+
+  return {
+    files: manifestFiles,
+    entrypoints: entrypointFiles,
+  };
+};

packages/builder/builder-webpack-provider/src/plugins/manifest.ts

@@ -1,4 +1,5 @@
 import type { BuilderPlugin } from '../types';
+import { generateManifest } from '@modern-js/builder-shared';
 
 export const builderPluginManifest = (): BuilderPlugin => ({
   name: 'builder-plugin-manifest',
@@ -20,25 +21,7 @@ export const builderPluginManifest = (): BuilderPlugin => ({
         {
           fileName: 'asset-manifest.json',
           publicPath,
-          generate: (seed, files, entries) => {
-            const manifestFiles = files.reduce((manifest, file) => {
-              manifest[file.name] = file.path;
-              return manifest;
-            }, seed);
-
-            const entrypointFiles = Object.keys(entries).reduce<string[]>(
-              (previous, name) =>
-                previous.concat(
-                  entries[name].filter(fileName => !fileName.endsWith('.map')),
-                ),
-              [],
-            );
-
-            return {
-              files: manifestFiles,
-              entrypoints: entrypointFiles,
-            };
-          },
+          generate: generateManifest,
         },
       ]);
     });

packages/document/builder-doc/docs/en/config/output/enableAssetManifest.md

@@ -1,6 +1,5 @@
 - **Type:** `boolean`
 - **Default:** `false`
-- **Bundler:** `only support webpack`
 
 Whether to generate a manifest file that contains information of all assets.
 

packages/document/builder-doc/docs/en/guide/advanced/rspack-start.mdx

@@ -110,7 +110,6 @@ Unsupported configurations and capabilities include:
 
 - [output.disableCssExtract](/api/config-output.html#outputdisablecssextract)
 - [output.disableSourcemap.css](/api/config-output.html#outputdisablesourcemap)
-- [output.enableAssetManifest](/api/config-output.html#outputenableassetmanifest)
 - [output.enableCssModuleTSDeclaration](/api/config-output.html#outputenablecssmoduletsdeclaration)
 - [output.enableInlineScripts](/api/config-output.html#outputenableinlinescripts)
 - [output.legalComments.inline](/api/config-output.html#outputlegalcomments)

packages/document/builder-doc/docs/zh/config/output/enableAssetManifest.md

@@ -1,6 +1,5 @@
 - **类型：** `boolean`
 - **默认值：** `false`
-- **打包工具：** `仅支持 webpack`
 
 是否生成 manifest 文件，该文件包含所有构建产物的信息。