@taro-hmr-compile/plugin-webpack 0.0.1-alpha.9 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taro-hmr-compile/plugin-webpack",
-  "version": "0.0.1-alpha.9",
+  "version": "0.0.2",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -34,6 +34,7 @@
     "@types/babel__template": "^7.4.4",
     "@types/babel__traverse": "^7.28.0",
     "@types/debug": "^4.1.13",
+    "@types/lodash": "^4.17.26",
     "@types/node": "^22.20.1",
     "typescript": "^5.8.2",
     "webpack": "^5.110.3"
@@ -44,8 +45,9 @@
     "@babel/template": "^7.29.7",
     "@babel/traverse": "^7.29.8",
     "@babel/types": "^7.29.8",
-    "@taro-hmr-compile/core": "0.0.1-alpha.9",
+    "@taro-hmr-compile/core": "0.0.2",
     "debug": "^4.4.3",
+    "lodash": "^4.18.1",
     "tapable": "^2.3.3",
     "webpack-sources": "^3.5.1"
   },

package/src/compile/hmr-compiler-plugin.ts

@@ -20,18 +20,21 @@ interface TaroNormalModule {
     loaders: Array<{ loader: string; options?: unknown }>
 }
 
-type StyleFilename = NonNullable<Compiler['options']['output']['cssFilename']>
-
 export interface HmrCompilerPluginOptions {
     paths: IPaths
     appConfig: AppConfig
-    styleFilename?: StyleFilename
     debugNamespaces?: string
 }
 
 type CompileRequested = SyncHook<[page: string]>
 
-type ChunkModulesRendered = SyncHook<[source: string, isPageChunk: boolean]>
+interface ChunkModulesRenderedOptions {
+    source: string
+    isBootstrapChunk: boolean
+    chunk: Chunk
+}
+
+type ChunkModulesRendered = SyncHook<[options: ChunkModulesRenderedOptions]>
 
 export interface HmrCompilerHooks {
     compileRequested: CompileRequested
@@ -56,8 +59,6 @@ export class HmrCompilerPlugin {
 
     private compiler?: Compiler
 
-    private hasCompletedInitialBuild = false
-
     // 页面编译请求可能在任意时刻到达。先排队到下一轮 watchRun，避免与正在执行的编译相互覆盖。
     private readonly pendingFiles = new Set<string>()
 
@@ -80,7 +81,7 @@ export class HmrCompilerPlugin {
 
     static getCompilationHooks(compilation: Compilation): HmrCompilationHooks {
         if (!HmrCompilerPlugin.compilationHooksMap.get(compilation)) {
-            const chunkModulesRendered: ChunkModulesRendered = new SyncHook(['source', 'isBootstrapChunk'])
+            const chunkModulesRendered: ChunkModulesRendered = new SyncHook(['options'])
             HmrCompilerPlugin.compilationHooksMap.set(compilation, {chunkModulesRendered})
         }
         return HmrCompilerPlugin.compilationHooksMap.get(compilation)!
@@ -134,7 +135,7 @@ export class HmrCompilerPlugin {
             // 因而 hash、HMR diff 和 hot-update 仍以完整模块图为准。
             javascriptHooks.renderChunk.tap({name: PLUGIN_NAME, stage: -10_000}, (source, {chunk}) => {
                 const isBootstrapChunk = isPageChunk(chunk)
-                hmrHooks.chunkModulesRendered.call(source.source().toString(), isBootstrapChunk)
+                hmrHooks.chunkModulesRendered.call({source: source.source().toString(), isBootstrapChunk, chunk})
                 return isBootstrapChunk ? new RawSource('{}') : source
             })
 
@@ -167,17 +168,6 @@ export class HmrCompilerPlugin {
                 },
             )
 
-            const stage = compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_REPORT
-            compilation.hooks.processAssets.tap({name: PLUGIN_NAME, stage}, () => {
-                if (!this.hasCompletedInitialBuild && compilation.hash && compilation.errors.length === 0) {
-                    this.emitMissingPageStyleAssets(compilation)
-                }
-            })
-        })
-
-        compiler.hooks.afterEmit.tap(PLUGIN_NAME, compilation => {
-            const isSuccessful = compilation.errors.length === 0 && Boolean(compilation.hash)
-            this.hasCompletedInitialBuild = this.hasCompletedInitialBuild || isSuccessful
         })
 
         // 当前批次完成后释放快照；编译期间新进入 pendingFiles 的请求不会被清理。
@@ -204,23 +194,8 @@ export class HmrCompilerPlugin {
         return Array.from(pages).some(page => compilation.entrypoints.get(page)?.getEntrypointChunk() === chunk)
     }
 
-    /** PageShell 不包含真实页面的样式依赖，为缺失的页面样式补充空资产。 */
-    private emitMissingPageStyleAssets(compilation: Compilation) {
-        const {appConfig, styleFilename} = this.options
-        if (!styleFilename) return
-
-        getAllPages(appConfig).forEach(page => {
-            const chunk = compilation.entrypoints.get(page)?.getEntrypointChunk()
-            if (!chunk) return
-
-            const assetName = compilation.getPath(styleFilename, {chunk, contentHashType: 'css/mini-extract'})
-            if (!compilation.getAsset(assetName)) compilation.emitAsset(assetName, new RawSource(''))
-        })
-    }
-
     private reset() {
         clearCompiledPages(this.options.paths.appPath)
-        this.hasCompletedInitialBuild = false
         this.rebuildingFiles.clear()
         this.pendingFiles.clear()
     }

package/src/compile/hmr-output-plugin.ts

@@ -0,0 +1,158 @@
+import {randomUUID} from 'node:crypto'
+import type {NoParamCallback, PathOrFileDescriptor, WriteFileOptions} from 'node:fs'
+import {mkdir, rename, rm, writeFile} from 'node:fs/promises'
+import path from 'node:path'
+import type {Compilation, Compiler, OutputFileSystem} from 'webpack'
+
+export const PLUGIN_NAME = 'HmrOutputPlugin'
+
+type WriteFile = OutputFileSystem['writeFile']
+
+type WriteFileData = string | NodeJS.ArrayBufferView
+
+export interface AtomicOutputPluginOptions {
+    /** 这些资产仍由 Webpack 生成，但等其他资产输出完成后才按配置顺序发布。 */
+    deferredAssets?: readonly string[]
+}
+
+interface DeferredOutput {
+    data: WriteFileData
+    file: string
+}
+
+export class HmrOutputPlugin {
+    private readonly deferredAssets: readonly string[]
+
+    private readonly deferredOutputs = new WeakMap<Compilation, Map<string, DeferredOutput>>()
+
+    constructor(options: AtomicOutputPluginOptions = {}) {
+        this.deferredAssets = options.deferredAssets ?? []
+    }
+
+    apply(compiler: Compiler): void {
+        const outputFileSystem = compiler.outputFileSystem
+
+        if (!outputFileSystem) throw new Error(`[${PLUGIN_NAME}] Webpack outputFileSystem 尚未初始化`)
+
+        compiler.outputFileSystem = this.createOutputFileSystem(compiler, outputFileSystem)
+
+        // 尽可能在其他 emit tap 之后读取资产，随后 Webpack 才开始物理输出。
+        compiler.hooks.emit.tap({name: PLUGIN_NAME, stage: Number.MAX_SAFE_INTEGER}, compilation => {
+            if (compilation.errors.length > 0) return
+            this.collectDeferredOutputs(compiler, compilation)
+        })
+
+        // 等待普通资产写入完成后，再按配置顺序发布延迟资产。
+        compiler.hooks.afterEmit.tapPromise(PLUGIN_NAME, async compilation => {
+            try {
+                if (compilation.errors.length > 0) return
+                await this.flushDeferredOutputs(compilation)
+            } finally {
+                this.deferredOutputs.delete(compilation)
+            }
+        })
+    }
+
+    /**
+     * 代理原始 OutputFileSystem。
+     * 仅重写 writeFile，其余方法调用原始文件系统实现。
+     */
+    private createOutputFileSystem(compiler: Compiler, original: OutputFileSystem): OutputFileSystem {
+        return new Proxy(original, {
+            get: (target, property) => {
+                if (property === 'writeFile') return this.createWriteFile(compiler, original)
+                const value = Reflect.get(target, property, target)
+                return typeof value === 'function' ? value.bind(target) : value
+            }
+        })
+    }
+
+    /**
+     * 创建自定义 writeFile 实现。
+     */
+    private createWriteFile(compiler: Compiler, original: OutputFileSystem): WriteFile {
+        const originalWriteFile = original.writeFile.bind(original)
+
+        return (file: PathOrFileDescriptor, data: WriteFileData, optionsOrCallback: WriteFileOptions | NoParamCallback, optionalCallback?: NoParamCallback): void => {
+
+            const callback = (() => {
+                if (typeof optionsOrCallback === 'function') return optionsOrCallback
+                return optionalCallback
+            })()
+
+            const triggerOriginalWriteFile = () => {
+                if (typeof optionsOrCallback === 'function') return originalWriteFile(file, data, optionsOrCallback)
+                if (optionalCallback) originalWriteFile(file, data, optionsOrCallback, optionalCallback)
+            }
+
+            if (typeof file !== 'string' || !callback) return triggerOriginalWriteFile()
+
+            const assetName = this.getAssetName(compiler, file)
+
+            if (assetName && this.deferredAssets.includes(assetName)) return callback(null)
+
+            this.writeFileAtomically(file, data).then(() => callback(null)).catch(error => callback(error))
+        }
+    }
+
+    private collectDeferredOutputs(compiler: Compiler, compilation: Compilation): void {
+        if (this.deferredAssets.length === 0) return
+
+        const {path: outputPath} = compiler.options.output
+
+        if (!outputPath) throw new Error(`[${PLUGIN_NAME}] 无法收集延迟资产：output.path 未配置`)
+
+        const outputs = new Map<string, DeferredOutput>()
+
+        this.deferredAssets.forEach(assetName => {
+            const asset = compilation.getAsset(assetName)
+            if (!asset) return
+            const data = asset.source.source()
+            outputs.set(assetName, {data, file: path.join(outputPath, assetName)})
+        })
+
+        this.deferredOutputs.set(compilation, outputs)
+    }
+
+    private getAssetName(compiler: Compiler, file: string) {
+        const {path: outputPath} = compiler.options.output
+
+        if (!outputPath) return
+
+        const assetName = path.relative(outputPath, file).replaceAll('\\', '/')
+
+        if (assetName.startsWith('../') || path.isAbsolute(assetName)) return
+
+        return assetName
+    }
+
+    private async flushDeferredOutputs(compilation: Compilation) {
+        const outputs = this.deferredOutputs.get(compilation)
+
+        if (!outputs) return
+
+        return Promise.all(this.deferredAssets.map(assetName => {
+            const output = outputs.get(assetName)
+            if (!output) return
+            return this.writeFileAtomically(output.file, output.data)
+        }))
+    }
+
+    /**
+     * 通过同目录临时文件和 rename 原子替换目标文件。
+     */
+    private async writeFileAtomically(targetPath: string, data: WriteFileData): Promise<void> {
+        const directory = path.dirname(targetPath)
+
+        const temporaryPath = path.join(directory, `.${path.basename(targetPath)}.${randomUUID()}.tmp`)
+
+        await mkdir(directory, {recursive: true})
+
+        try {
+            await writeFile(temporaryPath, data)
+            await rename(temporaryPath, targetPath)
+        } finally {
+            await rm(temporaryPath, {force: true})
+        }
+    }
+}

package/src/compile/hmr-style-plugin.ts

@@ -0,0 +1,70 @@
+import type {Compilation, Compiler} from 'webpack'
+import {RawSource} from 'webpack-sources'
+
+export interface HmrStylePluginOptions {
+    /** Webpack/Taro 生成的全局样式资产。 */
+    sourceAsset: string
+    /** 固定入口资产；后续编译持续引用 patchAsset。 */
+    entryAsset: string
+    /** 每轮热编译输出的独立样式资产。 */
+    patchAsset: string
+    /** 是否将入口固定为对 patchAsset 的导入。 */
+    preserveEntry?: boolean
+    /** 自定义源样式到 patch 样式的内容转换。 */
+    transform?: (source: string, compilation: Compilation) => string
+}
+
+const PLUGIN_NAME = 'HmrStylePlugin'
+
+/**
+ * 将构建器生成的全局样式复制到独立 HMR 资产，并可固定入口文件。
+ * 应在构建器完成最终资产变换后运行。
+ */
+export class HmrStylePlugin {
+    private readonly options: HmrStylePluginOptions
+
+    private initialBuildDone = false
+
+    constructor(options: HmrStylePluginOptions) {
+        this.options = options
+    }
+
+    apply(compiler: Compiler) {
+        compiler.hooks.compilation.tap(PLUGIN_NAME, compilation => {
+            const stage = compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_REPORT
+            compilation.hooks.processAssets.tap({name: PLUGIN_NAME, stage}, () => this.processAssets(compilation))
+        })
+
+        compiler.hooks.afterEmit.tap(PLUGIN_NAME, compilation => {
+            if (compilation.errors.length === 0 && compilation.hash) this.initialBuildDone = true
+        })
+
+        compiler.hooks.watchClose.tap(PLUGIN_NAME, () => {
+            this.initialBuildDone = false
+        })
+    }
+
+    private processAssets(compilation: Compilation) {
+        if (!compilation.hash || compilation.errors.length > 0) return
+
+        const {sourceAsset, entryAsset, patchAsset, preserveEntry = true, transform} = this.options
+        const source = compilation.getAsset(sourceAsset)?.source.source().toString()
+
+        if (source !== undefined) {
+            const patchSource = transform ? transform(source, compilation) : source
+            this.updateAsset(compilation, patchAsset, new RawSource(patchSource), {
+                hotModuleReplacement: this.initialBuildDone
+            })
+        }
+
+        if (preserveEntry) {
+            const entry = new RawSource(`@import ${JSON.stringify(`./${patchAsset}`)};\n`)
+            this.updateAsset(compilation, entryAsset, entry)
+        }
+    }
+
+    private updateAsset(compilation: Compilation, name: string, source: RawSource, info = {}) {
+        if (compilation.getAsset(name)) compilation.updateAsset(name, source, info)
+        else compilation.emitAsset(name, source, info)
+    }
+}

package/src/compile/lazy-compiler-loader.ts

@@ -3,22 +3,25 @@ import path from "path";
 import {getAllPages} from '../utils'
 import {isPageCompiled} from './compile-state'
 import type {AppConfig} from "@tarojs/taro";
+import generator from '@babel/generator'
+import {parse} from '@babel/parser'
+import template from '@babel/template'
+import traverse from '@babel/traverse'
+import * as t from '@babel/types'
 
 
 interface CreateShellOpt {
     page: string
     framework: 'react'
     compileUrl: string
-    memo: boolean
 }
 
 export const createReactShell = (opt: CreateShellOpt) => {
-    const {page, compileUrl, memo} = opt
+    const {page, compileUrl} = opt
     return `
     import { PageShell } from ${JSON.stringify(require.resolve('@taro-hmr-compile/core/runtime'))}
-    ${memo ? "import React from 'react'" : ''}
     const Page = () => <PageShell page={${JSON.stringify(page)}} compileUrl={${JSON.stringify(compileUrl)}}/>
-    export default ${memo ? 'React.memo(Page)' : 'Page'}
+    export default Page
     `
 }
 
@@ -27,8 +30,69 @@ const createShell = (opt: CreateShellOpt) => {
     throw new Error(`unsupported framework: ${opt.framework}`)
 }
 
-const isMemoPage = (source: string) => {
-    return /\bexport\s+default\s+(?:(?:React\.)?memo|observer)\s*\(/.test(source)
+export const wrapReactPage = (source: string, pageName: string): string => {
+    const ast = parse(source, {sourceType: 'module', plugins: ['typescript', 'jsx']})
+    const runtimeRequest = require.resolve('@taro-hmr-compile/core/runtime')
+
+    traverse(ast, {
+        Program(programPath) {
+            const hasWithHmrPage = () => programPath.node.body.some(node => {
+                if (!t.isImportDeclaration(node) || node.source.value !== runtimeRequest) return false
+
+                return node.specifiers.some(specifier => {
+                    return t.isImportSpecifier(specifier) && t.isIdentifier(specifier.imported, {name: 'withHmrPage'})
+                })
+            })
+
+            if (hasWithHmrPage()) return
+
+            const withHmrPage = programPath.scope.generateUidIdentifier('withHmrPage')
+
+            programPath.traverse({
+                ExportDefaultDeclaration(exportPath) {
+                    if (hasWithHmrPage()) return
+                    const declaration = exportPath.node.declaration
+
+                    // 跳过只有类型声明、没有函数实现 的 TypeScript 节点
+                    if (t.isTSDeclareFunction(declaration)) return
+
+                    const component = (() => {
+                        // 具名函数或类保留原声明，通过名称引用，避免破坏模块内的其他引用。
+                        if ((t.isFunctionDeclaration(declaration) || t.isClassDeclaration(declaration)) && declaration.id) return t.identifier(declaration.id.name)
+
+                        // 标识符、箭头函数、observer(...) 等表达式可以直接作为包装参数。
+                        if (t.isExpression(declaration)) return declaration
+
+                        // 匿名函数或类声明需要先转成表达式，才能作为包装参数。
+                        return t.toExpression(declaration)
+                    })()
+                    const defaultExport = template.statement(`export default %%WRAPPER%%(%%COMPONENT%%, %%PAGE_NAME%%);`)({
+                        WRAPPER: withHmrPage,
+                        COMPONENT: component,
+                        PAGE_NAME: t.stringLiteral(pageName),
+                    })
+
+                    const hasNamedDeclaration = (t.isFunctionDeclaration(declaration) || t.isClassDeclaration(declaration)) && Boolean(declaration.id)
+
+                    // 先插入 runtime 导入，让替换后重新入队的默认导出也能识别为已处理。
+                    programPath.unshiftContainer('body', template.statement(`import { withHmrPage as %%WRAPPER%% } from %%RUNTIME%%;`)({
+                        WRAPPER: withHmrPage,
+                        RUNTIME: t.stringLiteral(runtimeRequest),
+                    }))
+
+                    // 具名函数或类保留声明，再追加包装后的默认导出。
+                    if (hasNamedDeclaration) exportPath.replaceWithMultiple([declaration, defaultExport])
+
+                    // 表达式或匿名声明直接替换为包装后的默认导出。
+                    if (!hasNamedDeclaration) exportPath.replaceWith(defaultExport)
+
+                    exportPath.skip()
+                },
+            })
+        },
+    })
+
+    return generator(ast).code
 }
 
 
@@ -38,20 +102,31 @@ interface LoaderOptions {
     appConfig: AppConfig
     framework: 'react'
     compileUrl: string
+    lazyCompileExclude?: string[]
 }
 
 const lazyCompilerLoader: LoaderDefinitionFunction<LoaderOptions> = function (source) {
-    const {appPath, framework, appConfig, sourcePath, compileUrl} = this.getOptions()
+    const {appPath, framework, appConfig, sourcePath, compileUrl, lazyCompileExclude = []} = this.getOptions()
 
     const {dir: resourceDir, name: resourceName} = path.parse(path.relative(sourcePath, this.resourcePath))
 
-    const resourcePath = path.join(resourceDir, resourceName)
+    const resourcePath = path.join(resourceDir, resourceName).replace(/\\/g, '/')
 
     const isPageEntry = getAllPages(appConfig).includes(resourcePath)
 
-    if (!isPageEntry || isPageCompiled(appPath, resourcePath)) return source
+    if (!isPageEntry) return source
+
+    if (isPageCompiled(appPath, resourcePath)) return wrapReactPage(source, resourcePath)
+
+    const isExcluded = lazyCompileExclude.some(excludePath => {
+        if (!excludePath) return false
+        const normalizedPath = path.posix.normalize(excludePath.replace(/\\/g, '/')).replace(/^\/+/, '')
+        return normalizedPath.endsWith('/') ? resourcePath.startsWith(normalizedPath) : resourcePath === normalizedPath
+    })
+
+    if (isExcluded) return wrapReactPage(source, resourcePath)
 
-    return createShell({page: resourcePath, framework, compileUrl, memo: isMemoPage(source)})
+    return createShell({page: resourcePath, framework, compileUrl})
 }
 
 export default lazyCompilerLoader

package/src/constants.ts

@@ -2,6 +2,8 @@ export const HMR_OUTPUT_PATH = 'hmr'
 
 export const HMR_PATCH_ASSET = `${HMR_OUTPUT_PATH}/patch.js`
 
+export const HMR_PATCH_STYLE_ASSET = `${HMR_OUTPUT_PATH}/patch.wxss`
+
 export const DEFAULT_HMR_PATCH_HISTORY_LIMIT = 20
 
 export const DEFAULT_DEBUG_NAMESPACES = 'taro-hmr-compile:*'

package/src/index.ts

@@ -1,25 +1,29 @@
 import type {IPluginContext} from '@tarojs/service'
 import type {AppConfig} from '@tarojs/taro'
-import {HMR_OUTPUT_PATH, DEFAULT_DEBUG_NAMESPACES} from './constants'
+import {HMR_OUTPUT_PATH, HMR_PATCH_ASSET, HMR_PATCH_STYLE_ASSET, DEFAULT_DEBUG_NAMESPACES} from './constants'
 import {getAppConfig} from './utils'
 import {HmrCompilerPlugin} from './compile/hmr-compiler-plugin'
 import {HmrPatchPlugin} from './patch/hmr-patch-plugin'
 import {HmrServerPlugin} from './server/hmr-server-plugin'
-import {emptyDirFile, findAvailablePort} from '@taro-hmr-compile/core/compiler'
+import {findAvailablePort} from '@taro-hmr-compile/core/compiler'
+import {HmrOutputPlugin} from './compile/hmr-output-plugin'
 import {enableLog} from './log'
 
+const CUSTOM_WRAPPER = 'custom-wrapper'
 
 export interface WebpackHmrCompileOpt {
     host: string
     port: number
     patchHistoryLimit: number
     debug: boolean | string
+    /** 相对于 sourceRoot 的页面路径（不含扩展名），支持开头 /，末尾 / 表示目录。 */
+    lazyCompileExclude: string[]
 }
 
 export default (ctx: IPluginContext, pluginOpts: Partial<WebpackHmrCompileOpt>) => {
     if (!ctx.runOpts.options?.isWatch) return
 
-    const {appPath, sourcePath, outputPath} = ctx.paths
+    const {appPath, sourcePath} = ctx.paths
 
     const {framework} = ctx.initialConfig
 
@@ -36,7 +40,10 @@ export default (ctx: IPluginContext, pluginOpts: Partial<WebpackHmrCompileOpt>)
 
     if (debugNamespaces) enableLog(debugNamespaces)
 
-    ctx.onBuildStart(() => emptyDirFile(outputPath))
+    ctx.modifyComponentConfig(({componentConfig}) => {
+        if (componentConfig.thirdPartyComponents.has(CUSTOM_WRAPPER)) return
+        componentConfig.thirdPartyComponents.set(CUSTOM_WRAPPER, new Set())
+    })
 
     ctx.modifyRunnerOpts(({opts}) => {
         opts.output ??= {}
@@ -59,7 +66,7 @@ export default (ctx: IPluginContext, pluginOpts: Partial<WebpackHmrCompileOpt>)
             .end()
             .use('lazy-compiler-loader')
             .loader(require.resolve('./compile/lazy-compiler-loader'))
-            .options({appPath, sourcePath, appConfig, framework, compileUrl})
+            .options({appPath, sourcePath, appConfig, framework, compileUrl, lazyCompileExclude: pluginOpts.lazyCompileExclude})
             .end()
 
         chain.output
@@ -68,12 +75,17 @@ export default (ctx: IPluginContext, pluginOpts: Partial<WebpackHmrCompileOpt>)
 
         const {patchHistoryLimit} = pluginOpts
 
-        const [{filename: styleFilename}] = chain.plugin('miniCssExtractPlugin')?.get('args') || []
-
-        chain.plugin('hmr-compiler-plugin').use(HmrCompilerPlugin, [{paths: ctx.paths, appConfig, styleFilename, debugNamespaces}])
-
+        chain.plugin('hmr-compiler-plugin').use(HmrCompilerPlugin, [{
+            paths: ctx.paths,
+            appConfig,
+            debugNamespaces
+        }])
         chain.plugin('hmr-plugin').use(webpack.HotModuleReplacementPlugin)
 
+        chain.plugin('hmr-output-plugin').use(HmrOutputPlugin, [{
+            deferredAssets: [HMR_PATCH_STYLE_ASSET, HMR_PATCH_ASSET, 'app.wxss'],
+        }])
+
         chain.plugin('hmr-patch-plugin').use(HmrPatchPlugin, [{patchHistoryLimit}])
 
         chain.plugin('hmr-server-plugin').use(HmrServerPlugin, [{host, port}])

package/src/patch/hmr-patch-plugin.ts

@@ -1,6 +1,7 @@
 import type {Compilation, Compiler} from 'webpack'
 import {RawSource} from 'webpack-sources'
-import {HMR_PATCH_ASSET} from '../constants'
+import path from 'node:path'
+import {HMR_PATCH_ASSET, HMR_PATCH_STYLE_ASSET} from '../constants'
 import {HmrCompilerPlugin} from '../compile/hmr-compiler-plugin'
 import {HmrPatchRuntimePlugin} from './hmr-patch-runtime-plugin'
 import {HmrPatchProcessor, HmrPatchProcessorOptions} from "./hmr-patch-processor";
@@ -10,6 +11,7 @@ const HOT_UPDATE_MANIFEST_SUFFIX = '.hot-update.json'
 const HOT_UPDATE_SCRIPT_SUFFIX = '.hot-update.js'
 const STYLE_ASSET_PATTERN = /\.(?:css|wxss|acss|ttss|qss|jxss)(?:\.map)?$/i
 const TEMPLATE_RUNTIME_ASSET_PATTERN = /(?:^|\/)(?:base\.wxml|utils\.wxs)$/i
+const STYLE_ENTRY_ASSET = 'app.wxss'
 
  type HmrPatchPluginOptions = Partial<HmrPatchProcessorOptions>
 
@@ -25,6 +27,8 @@ export class HmrPatchPlugin {
 
     private readonly patchProcessor: HmrPatchProcessor
 
+    private readonly preservedAssets = new Set([HMR_PATCH_ASSET, STYLE_ENTRY_ASSET, HMR_PATCH_STYLE_ASSET])
+
     private readonly emittedAssetSources = new Map<string, string>()
 
     constructor(options: HmrPatchPluginOptions) {
@@ -35,13 +39,18 @@ export class HmrPatchPlugin {
         new HmrPatchRuntimePlugin().apply(compiler)
 
         compiler.hooks.compilation.tap(PLUGIN_NAME, compilation => {
-            HmrCompilerPlugin.getCompilationHooks(compilation).chunkModulesRendered.tap(PLUGIN_NAME, (source, isBootstrapChunk) => {
-                this.patchProcessor.processChunkModules({compilation, source, isBootstrapChunk})
+            HmrCompilerPlugin.getCompilationHooks(compilation).chunkModulesRendered.tap(PLUGIN_NAME, options => {
+                this.patchProcessor.processChunkModules({compilation, ...options})
             })
 
             // 等 Webpack 生成完整的 hot-update assets 后，再统一转换成固定的 patch.js。
             const stage = compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_REPORT
-            compilation.hooks.processAssets.tap({name: PLUGIN_NAME, stage}, () => this.processAssets(compilation))
+            compilation.hooks.processAssets.tap({name: PLUGIN_NAME, stage}, () => {
+                if (compilation.errors.length > 0 || !compilation.hash) return
+                this.processStyleAssets(compilation)
+                this.processAssets(compilation)
+            })
+                this.removeHotUpdateAssets(compilation)
         })
 
         compiler.hooks.afterEmit.tap(PLUGIN_NAME, compilation => {
@@ -82,10 +91,40 @@ export class HmrPatchPlugin {
         this.previousHash = toHash
     }
 
+    /** 将 Webpack 汇总后的 App 样式放入固定 patch 文件，App 入口只保留稳定引用。 */
+    private processStyleAssets(compilation: Compilation) {
+        const entryAsset = compilation.getAsset(STYLE_ENTRY_ASSET)
+        const source = entryAsset?.source.source().toString()
+        if (!source) return
+
+        const importPath = path.posix.relative(path.posix.dirname(STYLE_ENTRY_ASSET), HMR_PATCH_STYLE_ASSET)
+        const patchImport = importPath.startsWith('.') ? importPath : `./${importPath}`
+        const alreadyPatched = source.trim() === `@import "${patchImport}";` || source.trim() === `@import '${patchImport}';`
+
+        if (!alreadyPatched) {
+            const patchDirectory = path.posix.dirname(HMR_PATCH_STYLE_ASSET)
+            const sourceDirectory = path.posix.dirname(STYLE_ENTRY_ASSET)
+            const patchSource = source.replace(/(@import\s+)(["'])([^"']+)\2/g, (match, prefix: string, quote: string, request: string) => {
+                if (/^(?:[a-z]+:|\/|#)/i.test(request)) return match
+                const resolved = path.posix.normalize(path.posix.join(sourceDirectory, request))
+                const relative = path.posix.relative(patchDirectory, resolved)
+                return `${prefix}${quote}${relative.startsWith('.') ? relative : `./${relative}`}${quote}`
+            })
+            this.emitAsset(compilation, HMR_PATCH_STYLE_ASSET, new RawSource(patchSource))
+        }
+
+        this.emitAsset(compilation, STYLE_ENTRY_ASSET, new RawSource(`@import ${JSON.stringify(patchImport)};\n`))
+    }
+
+    private emitAsset(compilation: Compilation, assetName: string, source: RawSource) {
+        if (compilation.getAsset(assetName)) compilation.updateAsset(assetName, source)
+        else compilation.emitAsset(assetName, source)
+    }
+
     /** 热更新转换完成后，保留固定 patch 与发生变化的模板、平台样式资产。 */
     private removeSupersededAssets(compilation: Compilation) {
         compilation.getAssets().forEach(asset => {
-            if (asset.name === HMR_PATCH_ASSET) return
+            if (this.preservedAssets.has(asset.name)) return
             if (!isPassthroughAsset(asset.name)) return compilation.deleteAsset(asset.name)
 
             const source = asset.source.source().toString()
@@ -108,4 +147,13 @@ export class HmrPatchPlugin {
         this.emittedAssetSources.clear()
         this.patchProcessor.reset()
     }
+    /** 补丁已从 hot-update assets 生成后，在 Webpack 写盘前从本次 compilation 移除它们。 */
+    private removeHotUpdateAssets(compilation: Compilation) {
+        compilation.getAssets().forEach(asset => {
+            if (asset.name.endsWith(HOT_UPDATE_MANIFEST_SUFFIX) || asset.name.endsWith(HOT_UPDATE_SCRIPT_SUFFIX)) {
+                compilation.deleteAsset(asset.name)
+            }
+        })
+    }
+
 }