feat: add html plugin for mako

packages/preset-umi/src/features/mako/mako.ts

@@ -1,5 +1,9 @@
 import path from 'path';
 import { IApi } from '../../types';
+import {
+  EntryAssets,
+  extractEntryAssets,
+} from '../../utils/extractEntryAssets';
 import { isWindows } from '../../utils/platform';
 
 export default (api: IApi) => {
@@ -45,17 +49,52 @@ export default (api: IApi) => {
     enableBy: api.EnableBy.config,
   });
 
+  // html 处理逻辑
+  const assets: EntryAssets = {
+    // Will contain all js and mjs files
+    js: [],
+    // Will contain all css files
+    css: [],
+  };
+
   api.modifyConfig((memo) => {
     // @TODO remove this when mako support windows
     if (isWindows) {
       memo.mako = false;
       process.env.OKAM = '';
     }
+    const makoPlugins = memo.mako?.plugins || [];
+    if (!api.config.mpa) {
+      makoPlugins.push({
+        name: 'UmiHtmlGenerationMako',
+        generateEnd: ({ stats }: any) => {
+          const entryPointFiles = new Set<string>();
+
+          for (const chunk of stats.entrypoints['umi'].chunks) {
+            const files = stats.chunks.find((c: any) => c.id === chunk).files;
+            for (const file of files) {
+              entryPointFiles.add(file);
+            }
+          }
+
+          let entryAssets = extractEntryAssets(Array.from(entryPointFiles));
+          Object.entries(entryAssets).forEach(([ext, files]) => {
+            if (!Array.isArray(assets[ext])) {
+              assets[ext] = [];
+            }
+            assets[ext].push(...files);
+          });
+        },
+      });
+    }
     return {
       ...memo,
       mfsu: false,
       hmrGuardian: false,
-      makoPlugins: memo.mako?.plugins || [],
+      mako: {
+        ...memo.mako,
+        plugins: makoPlugins,
+      },
     };
   });
 
@@ -78,4 +117,21 @@ export default (api: IApi) => {
       console.error(e);
     }
   });
+
+  api.addHTMLStyles(() => {
+    const { publicPath } = api.config;
+    const displayPublicPath = publicPath === 'auto' ? '/' : publicPath;
+    return assets.css.map((css) => {
+      return `${displayPublicPath}${css}`;
+    });
+  });
+
+  api.addHTMLHeadScripts(() => {
+    const { publicPath } = api.config;
+    const displayPublicPath = publicPath === 'auto' ? '/' : publicPath;
+
+    return assets.js.map((js) => {
+      return `${displayPublicPath}${js}`;
+    });
+  });
 };

packages/preset-umi/src/features/webpack/webpack.ts

@@ -3,6 +3,10 @@ import type {
   Compiler,
 } from '@umijs/bundler-webpack/compiled/webpack';
 import { IApi } from '../../types';
+import {
+  EntryAssets,
+  extractEntryAssets,
+} from '../../utils/extractEntryAssets';
 
 export default (api: IApi) => {
   api.describe({
@@ -11,7 +15,7 @@ export default (api: IApi) => {
   });
 
   // html 处理逻辑
-  const assets: { js: string[]; css: string[]; [key: string]: string[] } = {
+  const assets: EntryAssets = {
     // Will contain all js and mjs files
     js: [],
     // Will contain all css files
@@ -26,45 +30,12 @@ export default (api: IApi) => {
           const entryPointFiles = compilation.entrypoints
             .get('umi')!
             .getFiles();
-
-          // Extract paths to .js, .mjs and .css files from the current compilation
-          const entryPointPublicPathMap: Record<string, boolean> = {};
-          const extensionRegexp = /\.(css|js|mjs)(\?|$)/;
-
-          const UMI_ASSETS_REG = {
-            js: /^umi(\..+)?\.js$/,
-            css: /^umi(\..+)?\.css$/,
-          };
-
-          entryPointFiles.forEach((entryPointPublicPath) => {
-            const extMatch = extensionRegexp.exec(entryPointPublicPath);
-            // Skip if the public path is not a .css, .mjs or .js file
-            if (!extMatch) {
-              return;
-            }
-
-            if (entryPointPublicPath.includes('.hot-update')) {
-              return;
+          let entryAssets = extractEntryAssets(entryPointFiles);
+          Object.entries(entryAssets).forEach(([ext, files]) => {
+            if (!Array.isArray(assets[ext])) {
+              assets[ext] = [];
             }
-
-            // Skip if this file is already known
-            // (e.g. because of common chunk optimizations)
-            if (entryPointPublicPathMap[entryPointPublicPath]) {
-              return;
-            }
-
-            // umi html 默认会注入 不做处理
-            if (
-              UMI_ASSETS_REG.js.test(entryPointPublicPath) ||
-              UMI_ASSETS_REG.css.test(entryPointPublicPath)
-            ) {
-              return;
-            }
-
-            entryPointPublicPathMap[entryPointPublicPath] = true;
-            // ext will contain .js or .css, because .mjs recognizes as .js
-            const ext = extMatch[1] === 'mjs' ? 'js' : extMatch[1];
-            assets[ext].push(entryPointPublicPath);
+            assets[ext].push(...files);
           });
         },
       );

packages/preset-umi/src/utils/extractEntryAssets.ts

@@ -0,0 +1,60 @@
+export type EntryAssets = {
+  js: string[];
+  css: string[];
+  [key: string]: string[];
+};
+
+export function extractEntryAssets(entryPointFiles: string[]): EntryAssets {
+  const assets: {
+    js: string[];
+    css: string[];
+    [key: string]: string[];
+  } = {
+    // Will contain all js and mjs files
+    js: [],
+    // Will contain all css files
+    css: [],
+  };
+
+  // Extract paths to .js, .mjs and .css files from the current compilation
+  const entryPointPublicPathMap: Record<string, boolean> = {};
+  const extensionRegexp = /\.(css|js|mjs)(\?|$)/;
+
+  const UMI_ASSETS_REG = {
+    js: /^umi(\..+)?\.js$/,
+    css: /^umi(\..+)?\.css$/,
+  };
+
+  entryPointFiles.forEach((entryPointPublicPath) => {
+    const extMatch = extensionRegexp.exec(entryPointPublicPath);
+    // Skip if the public path is not a .css, .mjs or .js file
+    if (!extMatch) {
+      return;
+    }
+
+    if (entryPointPublicPath.includes('.hot-update')) {
+      return;
+    }
+
+    // Skip if this file is already known
+    // (e.g. because of common chunk optimizations)
+    if (entryPointPublicPathMap[entryPointPublicPath]) {
+      return;
+    }
+
+    // umi html 默认会注入 不做处理
+    if (
+      UMI_ASSETS_REG.js.test(entryPointPublicPath) ||
+      UMI_ASSETS_REG.css.test(entryPointPublicPath)
+    ) {
+      return;
+    }
+
+    entryPointPublicPathMap[entryPointPublicPath] = true;
+    // ext will contain .js or .css, because .mjs recognizes as .js
+    const ext = extMatch[1] === 'mjs' ? 'js' : extMatch[1];
+    assets[ext].push(entryPointPublicPath);
+  });
+
+  return assets;
+}