@tarojs/webpack5-runner 4.2.1-beta.0 → 4.2.1-beta.2

package/dist/plugins/MiniPlugin.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -12,21 +35,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.STYLE_ISOLATION_SHARED = exports.STYLE_ISOLATION_APPLY_SHARED = exports.customWrapperName = exports.baseCompName = void 0;
 const node_path_1 = __importDefault(require("node:path"));
 const helper_1 = require("@tarojs/helper");
 const loader_utils_1 = require("loader-utils");
+const tapable_1 = require("tapable");
 const EntryDependency_1 = __importDefault(require("webpack/lib/dependencies/EntryDependency"));
 const TaroSingleEntryDependency_1 = __importDefault(require("../dependencies/TaroSingleEntryDependency"));
 const prerender_1 = require("../prerender/prerender");
 const component_1 = require("../utils/component");
+const forceCustomWrapper_1 = require("../utils/forceCustomWrapper");
 const webpack_1 = require("../utils/webpack");
+const AsyncSubPackagePlugin_1 = __importDefault(require("./AsyncSubPackagePlugin"));
+const SubPackageIndiePlugin_1 = __importStar(require("./SubPackageIndiePlugin"));
 const TaroLoadChunksPlugin_1 = __importDefault(require("./TaroLoadChunksPlugin"));
 const TaroNormalModulesPlugin_1 = __importDefault(require("./TaroNormalModulesPlugin"));
 const TaroSingleEntryPlugin_1 = __importDefault(require("./TaroSingleEntryPlugin"));
-const baseCompName = 'comp';
-const customWrapperName = 'custom-wrapper';
+exports.baseCompName = 'comp';
+exports.customWrapperName = 'custom-wrapper';
 const PLUGIN_NAME = 'TaroMiniPlugin';
 const CHILD_COMPILER_TAG = 'child';
+exports.STYLE_ISOLATION_APPLY_SHARED = 'apply-shared';
+exports.STYLE_ISOLATION_SHARED = 'shared';
 function isLoaderExist(loaders, loaderName) {
     return loaders.some(item => item.loader === loaderName);
 }
@@ -46,6 +76,9 @@ class TaroMiniPlugin {
         this.dependencies = new Map();
         this.pageLoaderName = '@tarojs/taro-loader/lib/page';
         this.independentPackages = new Map();
+        this.asyncSubPackagePlugin = null;
+        this.subPackageIndiePlugin = null;
+        this.forceCustomWrapperDefineDefinitions = null;
         const { combination } = options;
         const miniBuildConfig = combination.config;
         const { template, baseLevel = 16, experimental } = miniBuildConfig;
@@ -69,6 +102,22 @@ class TaroMiniPlugin {
             hot: options.hot,
             loaderMeta: options.loaderMeta || {},
         };
+        // 初始化扩展钩子
+        this.hooks = {
+            modifyEntries: new tapable_1.SyncWaterfallHook(['entries']),
+            modifyChunkRequire: new tapable_1.SyncWaterfallHook(['result', 'chunkId', 'miniType']),
+            afterResolveModule: new tapable_1.SyncHook(['resolveData']),
+            compileExtraEntries: new tapable_1.SyncHook(['compiler', 'compilation', 'promises']),
+            modifySkipRootTemplates: new tapable_1.SyncWaterfallHook(['skip']),
+            generateExtraFiles: new tapable_1.SyncWaterfallHook(['customWrapperRoots', 'compilation', 'compiler']),
+            modifyPageConfig: new tapable_1.SyncWaterfallHook(['context', 'page', 'customWrapperRoots']),
+            modifyComponentConfig: new tapable_1.SyncHook(['context', 'customWrapperRoots']),
+            afterGenerateFiles: new tapable_1.SyncHook(['compilation', 'compiler']),
+            optimizeAssets: new tapable_1.SyncHook(['compilation']),
+            modifyConfig: new tapable_1.SyncWaterfallHook(['config', 'componentName']),
+            modifyStyleImport: new tapable_1.SyncWaterfallHook(['context', 'page']),
+            modifyShouldProcessStyles: new tapable_1.SyncWaterfallHook(['shouldProcess']),
+        };
         if (template.isSupportRecursive === false && baseLevel > 0) {
             template.baseLevel = baseLevel;
         }
@@ -99,11 +148,17 @@ class TaroMiniPlugin {
     apply(compiler) {
         this.context = compiler.context;
         this.appEntry = this.getAppEntry(compiler);
+        if (this.options.newBlended) {
+            this.subPackageIndiePlugin = new SubPackageIndiePlugin_1.default(this);
+            this.subPackageIndiePlugin.apply();
+        }
         const { commonChunks, combination, framework, isBuildPlugin, newBlended, } = this.options;
         const { addChunkPages, onCompilerMake, modifyBuildAssets, onParseCreateElement, } = combination.config;
         /** build mode */
         compiler.hooks.run.tapAsync(PLUGIN_NAME, this.tryAsync((compiler) => __awaiter(this, void 0, void 0, function* () {
             yield this.run(compiler);
+            this.applyForceCustomWrapperDefine(compiler);
+            this.applyAsyncSubPackagePlugin(compiler);
             new TaroLoadChunksPlugin_1.default({
                 commonChunks: commonChunks,
                 isBuildPlugin,
@@ -120,6 +175,8 @@ class TaroMiniPlugin {
                 this.isWatch = true;
             }
             yield this.run(compiler);
+            this.applyForceCustomWrapperDefine(compiler);
+            this.applyAsyncSubPackagePlugin(compiler);
             if (!this.loadChunksPlugin) {
                 this.loadChunksPlugin = new TaroLoadChunksPlugin_1.default({
                     commonChunks: commonChunks,
@@ -137,6 +194,7 @@ class TaroMiniPlugin {
             const dependencies = this.dependencies;
             const promises = [];
             this.compileIndependentPages(compiler, compilation, dependencies, promises);
+            this.hooks.compileExtraEntries.call(compiler, compilation, promises);
             dependencies.forEach(dep => {
                 promises.push(new Promise((resolve, reject) => {
                     compilation.addEntry(this.options.sourceDir, dep, Object.assign({ name: dep.name }, dep.options), err => err ? reject(err) : resolve(null));
@@ -149,6 +207,11 @@ class TaroMiniPlugin {
             /** For Webpack compilation get factory from compilation.dependencyFactories by denpendence's constructor */
             compilation.dependencyFactories.set(EntryDependency_1.default, normalModuleFactory);
             compilation.dependencyFactories.set(TaroSingleEntryDependency_1.default, normalModuleFactory);
+            if (this.options.newBlended) {
+                normalModuleFactory.hooks.afterResolve.tap(PLUGIN_NAME, (resolveData) => {
+                    this.hooks.afterResolveModule.call(resolveData);
+                });
+            }
             /**
              * webpack NormalModule 在 runLoaders 真正解析资源的前一刻，
              * 往 NormalModule.loaders 中插入对应的 Taro Loader
@@ -292,6 +355,10 @@ class TaroMiniPlugin {
                     let source;
                     const id = (0, webpack_1.getChunkIdOrName)(chunk);
                     const { miniType } = entryModule;
+                    const modifyResult = this.hooks.modifyChunkRequire.call({ source: modules, handled: false }, id, miniType);
+                    if (modifyResult === null || modifyResult === void 0 ? void 0 : modifyResult.handled) {
+                        return modifyResult.source;
+                    }
                     const entryChunk = [{ name: 'app' }];
                     // 所有模块都依赖app.js，确保@tarojs\plugin-platform-xxx\dist\runtime.js先于@tarojs/runtime执行，避免Taro API未被初始化
                     if (this.nativeComponents.has(id) || miniType === helper_1.META_TYPE.STATIC) {
@@ -300,7 +367,8 @@ class TaroMiniPlugin {
                                 source = (0, webpack_1.addRequireToSource)(id, modules, v);
                             }
                         });
-                        return source;
+                        // 如果没有依赖需要注入，返回原始模块
+                        return source || modules;
                     }
                     else if (miniType === helper_1.META_TYPE.PAGE) {
                         return (0, webpack_1.addRequireToSource)(id, modules, entryChunk);
@@ -309,6 +377,23 @@ class TaroMiniPlugin {
             });
         });
     }
+    /**
+     * 初始化异步分包插件。
+     * MiniPlugin 仅作为桥接，具体的 babel 注入、chunk 处理和 app.json 注册由 AsyncSubPackagePlugin 承担。
+     */
+    applyAsyncSubPackagePlugin(compiler) {
+        if (!this.subPackageIndiePlugin)
+            return;
+        const asyncRootMap = this.subPackageIndiePlugin.getAsyncSubPackageRootMap();
+        if (asyncRootMap.size === 0)
+            return;
+        if (!this.asyncSubPackagePlugin) {
+            this.asyncSubPackagePlugin = new AsyncSubPackagePlugin_1.default(this);
+        }
+        this.asyncSubPackagePlugin.updateAsyncRootMap(asyncRootMap);
+        this.asyncSubPackagePlugin.updateAsyncRuntimeRoots(this.subPackageIndiePlugin.getAsyncSubPackageRuntimeRoots());
+        this.asyncSubPackagePlugin.apply(compiler);
+    }
     /**
      * 根据 webpack entry 配置获取入口文件路径
      * @returns app 入口文件路径
@@ -354,6 +439,8 @@ class TaroMiniPlugin {
      */
     run(compiler) {
         return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            (_a = this.subPackageIndiePlugin) === null || _a === void 0 ? void 0 : _a.invalidateRunCache();
             if (this.options.isBuildPlugin) {
                 this.getPluginFiles();
                 this.getConfigFiles(compiler);
@@ -479,12 +566,12 @@ class TaroMiniPlugin {
         }
         if (!this.options.template.isSupportRecursive) {
             pluginJSON.publicComponents = Object.assign({}, publicComponents, {
-                [baseCompName]: baseCompName
+                [exports.baseCompName]: exports.baseCompName
             });
         }
         if (isUsingCustomWrapper) {
             pluginJSON.publicComponents = Object.assign({}, publicComponents, {
-                [customWrapperName]: customWrapperName
+                [exports.customWrapperName]: exports.customWrapperName
             });
         }
     }
@@ -613,8 +700,11 @@ class TaroMiniPlugin {
      */
     addEntry(entryPath, entryName, entryType, options = {}) {
         let dep;
-        if (this.dependencies.has(entryPath)) {
-            dep = this.dependencies.get(entryPath);
+        // ★ 对于 STATIC 类型（如 comp/custom-wrapper），使用 entryName 作为 key 的一部分
+        // 这允许同一个模板文件被多次添加为不同名称的入口
+        const depKey = entryType === helper_1.META_TYPE.STATIC ? `${entryPath}#${entryName}` : entryPath;
+        if (this.dependencies.has(depKey)) {
+            dep = this.dependencies.get(depKey);
             dep.name = entryName;
             dep.loc = { name: entryName };
             dep.request = entryPath;
@@ -625,7 +715,7 @@ class TaroMiniPlugin {
         else {
             dep = new TaroSingleEntryDependency_1.default(entryPath, entryName, { name: entryName }, entryType, options);
         }
-        this.dependencies.set(entryPath, dep);
+        this.dependencies.set(depKey, dep);
     }
     /**
      * 在 this.dependencies 中新增或修改 app、模板组件、页面、组件等资源模块
@@ -633,10 +723,17 @@ class TaroMiniPlugin {
     addEntries() {
         const { template } = this.options;
         this.addEntry(this.appEntry, 'app', helper_1.META_TYPE.ENTRY);
-        if (!template.isSupportRecursive) {
+        const entryFlags = this.hooks.modifyEntries.call({
+            skipRootComp: false,
+            skipRootWrapper: false,
+        });
+        if (!template.isSupportRecursive && !entryFlags.skipRootComp) {
             this.addEntry(node_path_1.default.resolve(__dirname, '..', 'template/comp'), 'comp', helper_1.META_TYPE.STATIC);
         }
-        this.addEntry(node_path_1.default.resolve(__dirname, '..', 'template/custom-wrapper'), 'custom-wrapper', helper_1.META_TYPE.STATIC);
+        if (!entryFlags.skipRootWrapper) {
+            this.addEntry(node_path_1.default.resolve(__dirname, '..', 'template/custom-wrapper'), 'custom-wrapper', helper_1.META_TYPE.STATIC);
+        }
+        // subPackageIndie 下的 comp/custom-wrapper 统一走独立子编译器，避免被主编译的公共 chunk 共享
         this.pages.forEach(item => {
             if (item.isNative) {
                 this.addEntry(item.path, item.name, helper_1.META_TYPE.NORMAL, { isNativePage: true });
@@ -666,6 +763,39 @@ class TaroMiniPlugin {
             }
         });
     }
+    computeForceCustomWrapperForWebpackMainComp() {
+        var _a;
+        if (this.options.template.isSupportRecursive)
+            return false;
+        const independentPaths = new Set();
+        this.independentPackages.forEach(({ pages }) => {
+            pages.forEach(p => independentPaths.add(p));
+        });
+        for (const page of this.pages) {
+            if (page.isNative || independentPaths.has(page.path))
+                continue;
+            const content = (_a = this.filesConfig[this.getConfigFilePath(page.name)]) === null || _a === void 0 ? void 0 : _a.content;
+            if (content === null || content === void 0 ? void 0 : content.forceCustomWrapper)
+                return true;
+        }
+        return false;
+    }
+    computeForceCustomWrapperForIndieRoot(pages) {
+        return (0, forceCustomWrapper_1.computeForceCustomWrapperForIndependentPackage)(pages, this.pages, this.filesConfig, (p) => this.getConfigFilePath(p));
+    }
+    applyForceCustomWrapperDefine(compiler) {
+        if (this.options.template.isSupportRecursive)
+            return;
+        const value = JSON.stringify(this.computeForceCustomWrapperForWebpackMainComp());
+        if (!this.forceCustomWrapperDefineDefinitions) {
+            this.forceCustomWrapperDefineDefinitions = {
+                TARO_FORCE_CUSTOM_WRAPPER: value
+            };
+            new compiler.webpack.DefinePlugin(this.forceCustomWrapperDefineDefinitions).apply(compiler);
+            return;
+        }
+        this.forceCustomWrapperDefineDefinitions.TARO_FORCE_CUSTOM_WRAPPER = value;
+    }
     replaceExt(file, ext) {
         return node_path_1.default.join(node_path_1.default.dirname(file), node_path_1.default.basename(file, node_path_1.default.extname(file)) + `${ext}`);
     }
@@ -825,7 +955,7 @@ class TaroMiniPlugin {
                     filename: `[name]${this.options.fileType.style}`,
                     chunkFilename: `[name]${this.options.fileType.style}`
                 }).apply(childCompiler);
-                new compiler.webpack.DefinePlugin(this.options.constantsReplaceList).apply(childCompiler);
+                new compiler.webpack.DefinePlugin(Object.assign(Object.assign({}, this.options.constantsReplaceList), { TARO_FORCE_CUSTOM_WRAPPER: JSON.stringify(this.computeForceCustomWrapperForIndieRoot(pages)) })).apply(childCompiler);
                 if (compiler.options.optimization) {
                     new SplitChunksPlugin({
                         chunks: 'all',
@@ -965,6 +1095,12 @@ class TaroMiniPlugin {
             usingComponents[key] = match ? `${node_path_1.default.sep}${match[0]}` : compPath;
         }
     }
+    cloneThirdPartyComponent(thirdPartyComponents, componentName) {
+        const attrs = component_1.componentConfig.thirdPartyComponents.get(componentName);
+        if (!attrs || thirdPartyComponents.has(componentName))
+            return;
+        thirdPartyComponents.set(componentName, new Set(attrs));
+    }
     /** 生成小程序独立分包的相关文件 */
     generateIndependentMiniFiles(compilation, compiler) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -981,24 +1117,27 @@ class TaroMiniPlugin {
                 this.generateTemplateFile(compilation, compiler, `${name}/${baseTemplateName}`, template.buildTemplate, component_1.componentConfig);
                 if (!template.isSupportRecursive) {
                     // 如微信、QQ 不支持递归模版的小程序，需要使用自定义组件协助递归
-                    this.generateConfigFile(compilation, compiler, `${name}/${baseCompName}`, {
+                    const compConfig = {
                         component: true,
-                        styleIsolation: 'apply-shared',
+                        styleIsolation: exports.STYLE_ISOLATION_APPLY_SHARED,
                         usingComponents: {
-                            [baseCompName]: `./${baseCompName}`,
-                            [customWrapperName]: `./${customWrapperName}`
+                            [exports.baseCompName]: `./${exports.baseCompName}`
                         }
-                    });
-                    this.generateTemplateFile(compilation, compiler, `${name}/${baseCompName}`, template.buildBaseComponentTemplate, this.options.fileType.templ);
+                    };
+                    if (isUsingCustomWrapper) {
+                        compConfig.usingComponents[exports.customWrapperName] = `./${exports.customWrapperName}`;
+                    }
+                    this.generateConfigFile(compilation, compiler, `${name}/${exports.baseCompName}`, compConfig);
+                    this.generateTemplateFile(compilation, compiler, `${name}/${exports.baseCompName}`, template.buildBaseComponentTemplate, this.options.fileType.templ);
                 }
-                this.generateConfigFile(compilation, compiler, `${name}/${customWrapperName}`, {
+                this.generateConfigFile(compilation, compiler, `${name}/${exports.customWrapperName}`, {
                     component: true,
-                    styleIsolation: 'apply-shared',
+                    styleIsolation: exports.STYLE_ISOLATION_APPLY_SHARED,
                     usingComponents: {
-                        [customWrapperName]: `./${customWrapperName}`
+                        [exports.customWrapperName]: `./${exports.customWrapperName}`
                     }
                 });
-                this.generateTemplateFile(compilation, compiler, `${name}/${customWrapperName}`, template.buildCustomComponentTemplate, this.options.fileType.templ);
+                this.generateTemplateFile(compilation, compiler, `${name}/${exports.customWrapperName}`, template.buildCustomComponentTemplate, this.options.fileType.templ);
                 this.generateXSFile(compilation, compiler, `${name}/utils`);
             });
             this.pages.forEach(page => {
@@ -1021,14 +1160,14 @@ class TaroMiniPlugin {
                     this.generateTemplateFile(compilation, compiler, page.path, template.buildPageTemplate, importBaseTemplatePath, config);
                 }
                 if (config) {
-                    const importBaseCompPath = (0, helper_1.promoteRelativePath)(node_path_1.default.relative(page.path, node_path_1.default.join(sourceDir, independentName, this.getTargetFilePath(baseCompName, ''))));
-                    const importCustomWrapperPath = (0, helper_1.promoteRelativePath)(node_path_1.default.relative(page.path, node_path_1.default.join(sourceDir, independentName, this.getTargetFilePath(customWrapperName, ''))));
+                    const importBaseCompPath = (0, helper_1.promoteRelativePath)(node_path_1.default.relative(page.path, node_path_1.default.join(sourceDir, independentName, this.getTargetFilePath(exports.baseCompName, ''))));
+                    const importCustomWrapperPath = (0, helper_1.promoteRelativePath)(node_path_1.default.relative(page.path, node_path_1.default.join(sourceDir, independentName, this.getTargetFilePath(exports.customWrapperName, ''))));
                     config.content.usingComponents = Object.assign({}, config.content.usingComponents);
                     if (isUsingCustomWrapper) {
-                        config.content.usingComponents[customWrapperName] = importCustomWrapperPath;
+                        config.content.usingComponents[exports.customWrapperName] = importCustomWrapperPath;
                     }
                     if (!template.isSupportRecursive && !page.isNative) {
-                        config.content.usingComponents[baseCompName] = importBaseCompPath;
+                        config.content.usingComponents[exports.baseCompName] = importBaseCompPath;
                     }
                     this.generateConfigFile(compilation, compiler, page.path, config.content);
                 }
@@ -1043,6 +1182,8 @@ class TaroMiniPlugin {
             const { modifyMiniConfigs } = combination.config;
             const baseTemplateName = 'base';
             const isUsingCustomWrapper = component_1.componentConfig.thirdPartyComponents.has('custom-wrapper');
+            let subPackageIndieCustomWrapperRoots = new Set();
+            compilation[SubPackageIndiePlugin_1.subPackageIndieCustomWrapperRootsKey] = subPackageIndieCustomWrapperRoots;
             /**
              * 与原生小程序混写时解析模板与样式
              */
@@ -1062,47 +1203,55 @@ class TaroMiniPlugin {
                 const appConfigName = node_path_1.default.basename(appConfigPath).replace(node_path_1.default.extname(appConfigPath), '');
                 this.generateConfigFile(compilation, compiler, this.appEntry, this.filesConfig[appConfigName].content);
             }
-            if (!template.isSupportRecursive) {
+            let skipRootTemplates = false;
+            skipRootTemplates = this.hooks.modifySkipRootTemplates.call(skipRootTemplates);
+            if (!template.isSupportRecursive && !skipRootTemplates) {
                 // 如微信、QQ 不支持递归模版的小程序，需要使用自定义组件协助递归
-                this.generateTemplateFile(compilation, compiler, baseCompName, template.buildBaseComponentTemplate, this.options.fileType.templ);
+                this.generateTemplateFile(compilation, compiler, exports.baseCompName, template.buildBaseComponentTemplate, this.options.fileType.templ);
                 const baseCompConfig = {
                     component: true,
-                    styleIsolation: 'apply-shared',
+                    styleIsolation: exports.STYLE_ISOLATION_APPLY_SHARED,
                     usingComponents: {
-                        [baseCompName]: `./${baseCompName}`
+                        [exports.baseCompName]: `./${exports.baseCompName}`
                     }
                 };
                 if (isUsingCustomWrapper) {
-                    baseCompConfig.usingComponents[customWrapperName] = `./${customWrapperName}`;
-                    this.generateConfigFile(compilation, compiler, customWrapperName, {
+                    baseCompConfig.usingComponents[exports.customWrapperName] = `./${exports.customWrapperName}`;
+                    this.generateConfigFile(compilation, compiler, exports.customWrapperName, {
                         component: true,
-                        styleIsolation: 'apply-shared',
+                        styleIsolation: exports.STYLE_ISOLATION_APPLY_SHARED,
                         usingComponents: {
-                            [baseCompName]: `./${baseCompName}`,
-                            [customWrapperName]: `./${customWrapperName}`
+                            [exports.baseCompName]: `./${exports.baseCompName}`,
+                            [exports.customWrapperName]: `./${exports.customWrapperName}`
                         }
                     });
                 }
-                this.generateConfigFile(compilation, compiler, baseCompName, baseCompConfig);
+                this.generateConfigFile(compilation, compiler, exports.baseCompName, baseCompConfig);
             }
-            else {
+            else if (!skipRootTemplates) {
                 if (isUsingCustomWrapper) {
-                    this.generateConfigFile(compilation, compiler, customWrapperName, {
+                    this.generateConfigFile(compilation, compiler, exports.customWrapperName, {
                         component: true,
-                        styleIsolation: 'apply-shared',
+                        styleIsolation: exports.STYLE_ISOLATION_APPLY_SHARED,
                         usingComponents: {
-                            [customWrapperName]: `./${customWrapperName}`
+                            [exports.customWrapperName]: `./${exports.customWrapperName}`
                         }
                     });
                 }
             }
-            this.generateTemplateFile(compilation, compiler, baseTemplateName, template.buildTemplate, component_1.componentConfig);
-            isUsingCustomWrapper && this.generateTemplateFile(compilation, compiler, customWrapperName, template.buildCustomComponentTemplate, this.options.fileType.templ);
-            this.generateXSFile(compilation, compiler, 'utils');
+            // ★ 当配置了 mainPackageRoot 时，跳过根目录 base.wxml 和 utils.wxs 的生成
+            if (!skipRootTemplates) {
+                this.generateTemplateFile(compilation, compiler, baseTemplateName, template.buildTemplate, component_1.componentConfig);
+                isUsingCustomWrapper && this.generateTemplateFile(compilation, compiler, exports.customWrapperName, template.buildCustomComponentTemplate, this.options.fileType.templ);
+                this.generateXSFile(compilation, compiler, 'utils');
+            }
+            subPackageIndieCustomWrapperRoots = this.hooks.generateExtraFiles.call(subPackageIndieCustomWrapperRoots, compilation, compiler);
+            compilation[SubPackageIndiePlugin_1.subPackageIndieCustomWrapperRootsKey] = subPackageIndieCustomWrapperRoots;
             this.components.forEach(component => {
                 const importBaseTemplatePath = (0, helper_1.promoteRelativePath)(node_path_1.default.relative(component.path, node_path_1.default.join(sourceDir, isBuildPlugin ? 'plugin' : '', this.getTemplatePath(baseTemplateName))));
                 const config = this.filesConfig[this.getConfigFilePath(component.name)];
                 if (config) {
+                    this.hooks.modifyComponentConfig.call({ config, component }, subPackageIndieCustomWrapperRoots);
                     this.generateConfigFile(compilation, compiler, component.path, config.content);
                 }
                 if (!component.isNative) {
@@ -1110,31 +1259,46 @@ class TaroMiniPlugin {
                 }
             });
             this.pages.forEach(page => {
-                const importBaseTemplatePath = (0, helper_1.promoteRelativePath)(node_path_1.default.relative(page.path, node_path_1.default.join(sourceDir, isBuildPlugin ? 'plugin' : '', this.getTemplatePath(baseTemplateName))));
+                let importBaseTemplatePath = (0, helper_1.promoteRelativePath)(node_path_1.default.relative(page.path, node_path_1.default.join(sourceDir, isBuildPlugin ? 'plugin' : '', this.getTemplatePath(baseTemplateName))));
                 const config = this.filesConfig[this.getConfigFilePath(page.name)];
                 // pages 里面会混合独立分包的，在这里需要过滤一下，避免重复生成 assets
                 const isIndependent = !!this.getIndependentPackage(page.path);
                 if (isIndependent)
                     return;
                 // 生成页面模板需要在生成页面配置之前，因为会依赖到页面配置的部分内容
+                let importBaseCompPath = (0, helper_1.promoteRelativePath)(node_path_1.default.relative(page.path, node_path_1.default.join(sourceDir, isBuildPlugin ? 'plugin' : '', this.getTargetFilePath(exports.baseCompName, ''))));
+                let importCustomWrapperPath = (0, helper_1.promoteRelativePath)(node_path_1.default.relative(page.path, node_path_1.default.join(sourceDir, isBuildPlugin ? 'plugin' : '', this.getTargetFilePath(exports.customWrapperName, ''))));
+                let isPageRecursiveDisabled = false;
+                let shouldUseCustomWrapper = isUsingCustomWrapper;
+                const pageConfigContext = this.hooks.modifyPageConfig.call({
+                    importBaseTemplatePath,
+                    importBaseCompPath,
+                    importCustomWrapperPath,
+                    shouldUseCustomWrapper,
+                    isPageRecursiveDisabled,
+                }, page, subPackageIndieCustomWrapperRoots);
+                importBaseTemplatePath = pageConfigContext.importBaseTemplatePath;
+                importBaseCompPath = pageConfigContext.importBaseCompPath;
+                importCustomWrapperPath = pageConfigContext.importCustomWrapperPath;
+                shouldUseCustomWrapper = pageConfigContext.shouldUseCustomWrapper;
+                isPageRecursiveDisabled = pageConfigContext.isPageRecursiveDisabled;
                 if (!page.isNative) {
                     this.generateTemplateFile(compilation, compiler, page.path, template.buildPageTemplate, importBaseTemplatePath, config);
                 }
                 if (config) {
-                    const importBaseCompPath = (0, helper_1.promoteRelativePath)(node_path_1.default.relative(page.path, node_path_1.default.join(sourceDir, isBuildPlugin ? 'plugin' : '', this.getTargetFilePath(baseCompName, ''))));
-                    const importCustomWrapperPath = (0, helper_1.promoteRelativePath)(node_path_1.default.relative(page.path, node_path_1.default.join(sourceDir, isBuildPlugin ? 'plugin' : '', this.getTargetFilePath(customWrapperName, ''))));
                     config.content.usingComponents = Object.assign({}, config.content.usingComponents);
-                    if (isUsingCustomWrapper) {
-                        config.content.usingComponents[customWrapperName] = importCustomWrapperPath;
+                    if (shouldUseCustomWrapper) {
+                        config.content.usingComponents[exports.customWrapperName] = importCustomWrapperPath;
                     }
-                    if (!template.isSupportRecursive && !page.isNative) {
-                        config.content.usingComponents[baseCompName] = importBaseCompPath;
+                    if (!template.isSupportRecursive && !page.isNative && !isPageRecursiveDisabled) {
+                        config.content.usingComponents[exports.baseCompName] = importBaseCompPath;
                     }
                     this.generateConfigFile(compilation, compiler, page.path, config.content);
                 }
             });
             this.generateTabBarFiles(compilation, compiler);
             this.injectCommonStyles(compilation, compiler);
+            this.hooks.afterGenerateFiles.call(compilation, compiler);
             if (this.themeLocation) {
                 this.generateDarkModeFile(compilation, compiler);
             }
@@ -1167,12 +1331,15 @@ class TaroMiniPlugin {
                     delete compilation.assets[assetPath];
                 }
             });
+            this.hooks.optimizeAssets.call(compilation);
         });
     }
     generateConfigFile(compilation, compiler, filePath, config) {
         const { RawSource } = compiler.webpack.sources;
         const fileConfigName = this.getConfigPath(this.getComponentName(filePath));
-        const unofficialConfigs = ['enableShareAppMessage', 'enableShareTimeline', 'enablePageMeta', 'components'];
+        const componentName = this.getComponentName(filePath);
+        config = this.hooks.modifyConfig.call(config, componentName);
+        const unofficialConfigs = ['enableShareAppMessage', 'enableShareTimeline', 'enablePageMeta', 'components', 'forceCustomWrapper'];
         unofficialConfigs.forEach(item => {
             delete config[item];
         });
@@ -1318,12 +1485,21 @@ class TaroMiniPlugin {
                 });
             });
         }
-        if (commons.size() > 0) {
+        // 判断是否需要处理样式：有 common chunks 或者有 app.wxss（可被扩展插件修改）
+        const hasAppStyle = !!assets[appStyle];
+        let shouldProcessStyles = commons.size() > 0;
+        if (!hasAppStyle) {
+            shouldProcessStyles = false;
+        }
+        shouldProcessStyles = this.hooks.modifyShouldProcessStyles.call(shouldProcessStyles);
+        if (shouldProcessStyles) {
             const APP_STYLE_NAME = 'app-origin' + styleExt;
             assets[APP_STYLE_NAME] = new ConcatSource(originSource);
             const source = new ConcatSource('');
             source.add(`@import ${JSON.stringify((0, loader_utils_1.urlToRequest)(APP_STYLE_NAME))};`);
-            source.add(commons);
+            if (commons.size() > 0) {
+                source.add(commons);
+            }
             source.add('\n');
             assets[appStyle] = source;
             if (newBlended) {
@@ -1339,14 +1515,43 @@ class TaroMiniPlugin {
                         }
                         const source = new ConcatSource('');
                         const originSource = assets[pageStyle];
-                        componentCommons.forEach(item => {
-                            source.add(`@import ${JSON.stringify((0, loader_utils_1.urlToRequest)(node_path_1.default.posix.relative(node_path_1.default.dirname(pageStyle), item)))};\n`);
-                        });
+                        const styleImportContext = this.hooks.modifyStyleImport.call({
+                            importStatement: '',
+                            shouldSkip: false,
+                            isMainPackageRoot: false,
+                        }, page);
+                        if (styleImportContext.shouldSkip) {
+                            // no-op
+                        }
+                        else if (styleImportContext.importStatement) {
+                            source.add(styleImportContext.importStatement);
+                        }
+                        else {
+                            componentCommons.forEach(item => {
+                                source.add(`@import ${JSON.stringify((0, loader_utils_1.urlToRequest)(node_path_1.default.posix.relative(node_path_1.default.dirname(pageStyle), item)))};\n`);
+                            });
+                        }
                         source.add(originSource);
                         assets[pageStyle] = source;
                     }
                     else {
-                        if (pageStyle in assets) {
+                        // 普通页面（非本地化组件）
+                        const styleImportContext = this.hooks.modifyStyleImport.call({
+                            importStatement: '',
+                            shouldSkip: false,
+                            isMainPackageRoot: false,
+                        }, page);
+                        if (styleImportContext.importStatement) {
+                            const source = new ConcatSource('');
+                            if (pageStyle in assets) {
+                                source.add(assets[pageStyle]);
+                            }
+                            const importSource = new ConcatSource('');
+                            importSource.add(styleImportContext.importStatement);
+                            importSource.add(source);
+                            assets[pageStyle] = importSource;
+                        }
+                        else if (pageStyle in assets) {
                             const source = new ConcatSource('');
                             const originSource = assets[pageStyle];
                             source.add(`@import ${JSON.stringify((0, loader_utils_1.urlToRequest)(node_path_1.default.posix.relative(node_path_1.default.dirname(pageStyle), 'app' + styleExt)))};\n`);