@tarojs/webpack5-runner 3.7.0-alpha.0 → 3.7.0-alpha.10

package/dist/plugins/MiniPlugin.js

@@ -13,17 +13,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const helper_1 = require("@tarojs/helper");
-const fs_extra_1 = __importDefault(require("fs-extra"));
 const loader_utils_1 = require("loader-utils");
 const path_1 = __importDefault(require("path"));
 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 webpack_1 = require("../utils/webpack");
 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';
 const PLUGIN_NAME = 'TaroMiniPlugin';
+const CHILD_COMPILER_TAG = 'child';
 function isLoaderExist(loaders, loaderName) {
     return loaders.some(item => item.loader === loaderName);
 }
@@ -35,6 +38,8 @@ class TaroMiniPlugin {
         /** 页面列表 */
         this.pages = new Set();
         this.components = new Set();
+        /** 新的混合原生编译模式 newBlended 模式下，需要单独编译成原生代码的 component 的Map */
+        this.nativeComponents = new Map();
         /** tabbar icon 图片路径列表 */
         this.tabBarIcons = new Set();
         this.dependencies = new Map();
@@ -81,7 +86,7 @@ class TaroMiniPlugin {
     apply(compiler) {
         this.context = compiler.context;
         this.appEntry = this.getAppEntry(compiler);
-        const { commonChunks, addChunkPages, framework, isBuildPlugin } = this.options;
+        const { commonChunks, addChunkPages, framework, isBuildPlugin, newBlended, } = this.options;
         /** build mode */
         compiler.hooks.run.tapAsync(PLUGIN_NAME, this.tryAsync((compiler) => __awaiter(this, void 0, void 0, function* () {
             yield this.run(compiler);
@@ -147,6 +152,7 @@ class TaroMiniPlugin {
                                 config: this.appConfig,
                                 runtimePath: this.options.runtimePath,
                                 blended: this.options.blended,
+                                newBlended: this.options.newBlended,
                                 pxTransformConfig
                             }
                         });
@@ -159,13 +165,19 @@ class TaroMiniPlugin {
                             isIndependent = true;
                         }
                     });
-                    const loaderName = isBuildPlugin ? '@tarojs/taro-loader/lib/native-component' : (isIndependent ? '@tarojs/taro-loader/lib/independentPage' : this.pageLoaderName);
+                    const isNewBlended = this.nativeComponents.has(module.name);
+                    const loaderName = (isNewBlended || isBuildPlugin)
+                        ? '@tarojs/taro-loader/lib/native-component'
+                        : (isIndependent
+                            ? '@tarojs/taro-loader/lib/independentPage'
+                            : this.pageLoaderName);
                     if (!isLoaderExist(module.loaders, loaderName)) {
                         module.loaders.unshift({
                             loader: loaderName,
                             options: {
                                 framework,
                                 loaderMeta,
+                                isNewBlended,
                                 name: module.name,
                                 prerender: this.prerenderPages.has(module.name),
                                 config: this.filesConfig,
@@ -192,18 +204,93 @@ class TaroMiniPlugin {
                     }
                 }
             });
-            const { PROCESS_ASSETS_STAGE_ADDITIONAL } = compiler.webpack.Compilation;
+            const { PROCESS_ASSETS_STAGE_ADDITIONAL, PROCESS_ASSETS_STAGE_OPTIMIZE, PROCESS_ASSETS_STAGE_REPORT } = compiler.webpack.Compilation;
             compilation.hooks.processAssets.tapAsync({
                 name: PLUGIN_NAME,
                 stage: PROCESS_ASSETS_STAGE_ADDITIONAL
             }, this.tryAsync(() => __awaiter(this, void 0, void 0, function* () {
-                yield this.generateMiniFiles(compilation, compiler);
+                // 如果是子编译器，证明是编译独立分包，进行单独的处理
+                if (compilation.__tag === CHILD_COMPILER_TAG) {
+                    yield this.generateIndependentMiniFiles(compilation, compiler);
+                }
+                else {
+                    yield this.generateMiniFiles(compilation, compiler);
+                }
+            })));
+            compilation.hooks.processAssets.tapAsync({
+                name: PLUGIN_NAME,
+                // 删除 assets 的相关操作放在触发时机较后的 Stage，避免过早删除出现的一些问题，#13988
+                // Stage 触发顺序：https://webpack.js.org/api/compilation-hooks/#list-of-asset-processing-stages
+                stage: PROCESS_ASSETS_STAGE_OPTIMIZE
+            }, this.tryAsync(() => __awaiter(this, void 0, void 0, function* () {
+                yield this.optimizeMiniFiles(compilation, compiler);
+            })));
+            compilation.hooks.processAssets.tapAsync({
+                name: PLUGIN_NAME,
+                // 该 stage 是最后执行的，确保 taro 暴露给用户的钩子 modifyBuildAssets 在内部处理完 assets 之后再调用
+                stage: PROCESS_ASSETS_STAGE_REPORT
+            }, this.tryAsync(() => __awaiter(this, void 0, void 0, function* () {
+                const { modifyBuildAssets } = this.options;
+                if (typeof modifyBuildAssets === 'function') {
+                    yield modifyBuildAssets(compilation.assets, this);
+                }
             })));
         });
         compiler.hooks.afterEmit.tapAsync(PLUGIN_NAME, this.tryAsync((compilation) => __awaiter(this, void 0, void 0, function* () {
             yield this.addTarBarFilesToDependencies(compilation);
         })));
         new TaroNormalModulesPlugin_1.default(this.options.onParseCreateElement).apply(compiler);
+        newBlended && this.addLoadChunksPlugin(compiler);
+    }
+    addLoadChunksPlugin(compiler) {
+        const fileChunks = new Map();
+        compiler.hooks.thisCompilation.tap(PLUGIN_NAME, compilation => {
+            compilation.hooks.afterOptimizeChunks.tap(PLUGIN_NAME, chunks => {
+                for (const chunk of chunks) {
+                    const id = (0, webpack_1.getChunkIdOrName)(chunk);
+                    if (this.options.commonChunks.includes(id))
+                        return;
+                    const deps = [];
+                    for (const group of chunk.groupsIterable) {
+                        group.chunks.forEach(chunk => {
+                            const currentChunkId = (0, webpack_1.getChunkIdOrName)(chunk);
+                            if (id === currentChunkId)
+                                return;
+                            deps.push({
+                                name: currentChunkId
+                            });
+                        });
+                    }
+                    fileChunks.set(id, deps);
+                }
+            });
+            compiler.webpack.javascript.JavascriptModulesPlugin.getCompilationHooks(compilation).render.tap(PLUGIN_NAME, (modules, { chunk }) => {
+                var _a;
+                const chunkEntryModule = (0, webpack_1.getChunkEntryModule)(compilation, chunk);
+                if (!chunkEntryModule)
+                    return;
+                const entryModule = (_a = chunkEntryModule.rootModule) !== null && _a !== void 0 ? _a : chunkEntryModule;
+                // addChunkPages
+                if (fileChunks.size) {
+                    let source;
+                    const id = (0, webpack_1.getChunkIdOrName)(chunk);
+                    const { miniType } = entryModule;
+                    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) {
+                        fileChunks.forEach((v, k) => {
+                            if (k === id) {
+                                source = (0, webpack_1.addRequireToSource)(id, modules, v);
+                            }
+                        });
+                        return source;
+                    }
+                    else if (miniType === helper_1.META_TYPE.PAGE) {
+                        return (0, webpack_1.addRequireToSource)(id, modules, entryChunk);
+                    }
+                }
+            });
+        });
     }
     /**
      * 根据 webpack entry 配置获取入口文件路径
@@ -332,11 +419,11 @@ class TaroMiniPlugin {
             }
             this.compileFile(item);
             if (item.isNative) {
-                this.addEntry(item.path, item.name, helper_1.META_TYPE.NORMAL);
-                if (item.stylePath && fs_extra_1.default.existsSync(item.stylePath)) {
+                this.addEntry(item.path, item.name, helper_1.META_TYPE.NORMAL, { isNativePage: true });
+                if (item.stylePath && helper_1.fs.existsSync(item.stylePath)) {
                     this.addEntry(item.stylePath, this.getStylePath(item.name), helper_1.META_TYPE.NORMAL);
                 }
-                if (item.templatePath && fs_extra_1.default.existsSync(item.templatePath)) {
+                if (item.templatePath && helper_1.fs.existsSync(item.templatePath)) {
                     this.addEntry(item.templatePath, this.getTemplatePath(item.name), helper_1.META_TYPE.NORMAL);
                 }
             }
@@ -347,11 +434,11 @@ class TaroMiniPlugin {
         this.components.forEach(item => {
             this.compileFile(item);
             if (item.isNative) {
-                this.addEntry(item.path, item.name, helper_1.META_TYPE.NORMAL);
-                if (item.stylePath && fs_extra_1.default.existsSync(item.stylePath)) {
+                this.addEntry(item.path, item.name, helper_1.META_TYPE.NORMAL, { isNativePage: true });
+                if (item.stylePath && helper_1.fs.existsSync(item.stylePath)) {
                     this.addEntry(item.stylePath, this.getStylePath(item.name), helper_1.META_TYPE.NORMAL);
                 }
-                if (item.templatePath && fs_extra_1.default.existsSync(item.templatePath)) {
+                if (item.templatePath && helper_1.fs.existsSync(item.templatePath)) {
                     this.addEntry(item.templatePath, this.getTemplatePath(item.name), helper_1.META_TYPE.NORMAL);
                 }
             }
@@ -366,9 +453,14 @@ class TaroMiniPlugin {
         if (main) {
             pluginJSON.main = this.getTargetFilePath(main, '.js');
         }
-        if (publicComponents && isUsingCustomWrapper) {
+        if (!this.options.template.isSupportRecursive) {
             pluginJSON.publicComponents = Object.assign({}, publicComponents, {
-                'custom-wrapper': 'custom-wrapper'
+                [baseCompName]: baseCompName
+            });
+        }
+        if (isUsingCustomWrapper) {
+            pluginJSON.publicComponents = Object.assign({}, publicComponents, {
+                [customWrapperName]: customWrapperName
             });
         }
     }
@@ -396,6 +488,7 @@ class TaroMiniPlugin {
      */
     getPages() {
         var _a;
+        const { newBlended } = this.options;
         if ((0, helper_1.isEmptyObject)(this.appConfig)) {
             throw new Error('缺少 app 全局配置文件，请检查！');
         }
@@ -424,6 +517,30 @@ class TaroMiniPlugin {
             })
         ]);
         this.getSubPackages(this.appConfig);
+        // 新的混合原生编译模式 newBlended 下，需要收集独立编译为原生自定义组件
+        newBlended && this.getNativeComponent();
+    }
+    /**
+     * 收集需要转换为本地化组件的内容
+     */
+    getNativeComponent() {
+        const { frameworkExts } = this.options;
+        const components = this.appConfig.components || [];
+        components.forEach(item => {
+            var _a;
+            const pagePath = (0, helper_1.resolveMainFilePath)(path_1.default.join(this.options.sourceDir, item), frameworkExts);
+            const componentObj = {
+                name: item,
+                path: pagePath,
+                isNative: false,
+            };
+            if (!this.isWatch && ((_a = this.options.logger) === null || _a === void 0 ? void 0 : _a.quiet) === false) {
+                (0, helper_1.printLog)("compile" /* processTypeEnum.COMPILE */, `发现[${item}]Native组件`);
+            }
+            this.pages.add(componentObj);
+            // 登记需要编译成原生版本的组件
+            this.nativeComponents.set(item, componentObj);
+        });
     }
     /**
      * 读取页面及其依赖的组件的配置
@@ -443,7 +560,7 @@ class TaroMiniPlugin {
     getConfigFiles(compiler) {
         const filesConfig = this.filesConfig;
         Object.keys(filesConfig).forEach(item => {
-            if (fs_extra_1.default.existsSync(filesConfig[item].path)) {
+            if (helper_1.fs.existsSync(filesConfig[item].path)) {
                 this.addEntry(filesConfig[item].path, item, helper_1.META_TYPE.CONFIG);
             }
         });
@@ -490,11 +607,11 @@ class TaroMiniPlugin {
         this.addEntry(path_1.default.resolve(__dirname, '..', 'template/custom-wrapper'), 'custom-wrapper', helper_1.META_TYPE.STATIC);
         this.pages.forEach(item => {
             if (item.isNative) {
-                this.addEntry(item.path, item.name, helper_1.META_TYPE.NORMAL);
-                if (item.stylePath && fs_extra_1.default.existsSync(item.stylePath)) {
+                this.addEntry(item.path, item.name, helper_1.META_TYPE.NORMAL, { isNativePage: true });
+                if (item.stylePath && helper_1.fs.existsSync(item.stylePath)) {
                     this.addEntry(item.stylePath, this.getStylePath(item.name), helper_1.META_TYPE.NORMAL);
                 }
-                if (item.templatePath && fs_extra_1.default.existsSync(item.templatePath)) {
+                if (item.templatePath && helper_1.fs.existsSync(item.templatePath)) {
                     this.addEntry(item.templatePath, this.getTemplatePath(item.name), helper_1.META_TYPE.NORMAL);
                 }
             }
@@ -504,11 +621,11 @@ class TaroMiniPlugin {
         });
         this.components.forEach(item => {
             if (item.isNative) {
-                this.addEntry(item.path, item.name, helper_1.META_TYPE.NORMAL);
-                if (item.stylePath && fs_extra_1.default.existsSync(item.stylePath)) {
+                this.addEntry(item.path, item.name, helper_1.META_TYPE.NORMAL, { isNativePage: true });
+                if (item.stylePath && helper_1.fs.existsSync(item.stylePath)) {
                     this.addEntry(item.stylePath, this.getStylePath(item.name), helper_1.META_TYPE.NORMAL);
                 }
-                if (item.templatePath && fs_extra_1.default.existsSync(item.templatePath)) {
+                if (item.templatePath && helper_1.fs.existsSync(item.templatePath)) {
                     this.addEntry(item.templatePath, this.getTemplatePath(item.name), helper_1.META_TYPE.NORMAL);
                 }
             }
@@ -527,7 +644,17 @@ class TaroMiniPlugin {
         const filePath = file.path;
         const fileConfigPath = file.isNative ? this.replaceExt(filePath, '.json') : this.getConfigFilePath(filePath);
         const fileConfig = (0, helper_1.readConfig)(fileConfigPath);
+        const { componentGenerics } = fileConfig;
         const usingComponents = fileConfig.usingComponents;
+        if (this.options.isBuildPlugin && componentGenerics) {
+            Object.keys(componentGenerics).forEach(component => {
+                if (componentGenerics[component]) {
+                    if (!component_1.componentConfig.thirdPartyComponents.has(component)) {
+                        component_1.componentConfig.thirdPartyComponents.set(component, new Set());
+                    }
+                }
+            });
+        }
         // 递归收集依赖的第三方组件
         if (usingComponents) {
             const componentNames = Object.keys(usingComponents);
@@ -539,6 +666,17 @@ class TaroMiniPlugin {
                     compPath = (0, helper_1.replaceAliasPath)(filePath, compPath, alias);
                     fileConfig.usingComponents[compName] = compPath;
                 }
+                // 判断是否为第三方依赖的正则，如果 test 为 false 则为第三方依赖
+                const notNpmPkgReg = /^[.\\/]/;
+                if (!this.options.skipProcessUsingComponents
+                    && !compPath.startsWith('plugin://')
+                    && !notNpmPkgReg.test(compPath)) {
+                    const tempCompPath = (0, helper_1.getNpmPackageAbsolutePath)(compPath);
+                    if (tempCompPath) {
+                        compPath = tempCompPath;
+                        fileConfig.usingComponents[compName] = compPath;
+                    }
+                }
                 depComponents.push({
                     name: compName,
                     path: compPath
@@ -549,8 +687,11 @@ class TaroMiniPlugin {
             }
             depComponents.forEach(item => {
                 const componentPath = (0, helper_1.resolveMainFilePath)(path_1.default.resolve(path_1.default.dirname(file.path), item.path));
-                if (fs_extra_1.default.existsSync(componentPath) && !Array.from(this.components).some(item => item.path === componentPath)) {
+                if (helper_1.fs.existsSync(componentPath) && !Array.from(this.components).some(item => item.path === componentPath)) {
                     const componentName = this.getComponentName(componentPath);
+                    // newBlended 模式下，本地化组件使用Page进行处理，此处直接跳过
+                    if (this.nativeComponents.has(componentName))
+                        return;
                     const componentTempPath = this.getTemplatePath(componentPath);
                     const isNative = this.isNativePageORComponent(componentTempPath);
                     const componentObj = {
@@ -677,7 +818,7 @@ class TaroMiniPlugin {
                 pages.forEach(pagePath => {
                     if (dependencies.has(pagePath)) {
                         const dep = dependencies.get(pagePath);
-                        new TaroSingleEntryPlugin_1.default(compiler.context, dep === null || dep === void 0 ? void 0 : dep.request, dep === null || dep === void 0 ? void 0 : dep.name, dep === null || dep === void 0 ? void 0 : dep.miniType).apply(childCompiler);
+                        new TaroSingleEntryPlugin_1.default(compiler.context, dep === null || dep === void 0 ? void 0 : dep.request, dep === null || dep === void 0 ? void 0 : dep.name, dep === null || dep === void 0 ? void 0 : dep.miniType, dep === null || dep === void 0 ? void 0 : dep.options).apply(childCompiler);
                     }
                     this.pages.forEach(item => {
                         if (item.path === pagePath) {
@@ -698,6 +839,13 @@ class TaroMiniPlugin {
                 // 添加 comp 和 custom-wrapper 组件
                 new TaroSingleEntryPlugin_1.default(compiler.context, path_1.default.resolve(__dirname, '..', 'template/comp'), `${name}/comp`, helper_1.META_TYPE.STATIC).apply(childCompiler);
                 new TaroSingleEntryPlugin_1.default(compiler.context, path_1.default.resolve(__dirname, '..', 'template/custom-wrapper'), `${name}/custom-wrapper`, helper_1.META_TYPE.STATIC).apply(childCompiler);
+                // 给每个子编译器标记上名称和 tag
+                // tag 用于生成模板和 config 时区别于主编译器走不同的方法
+                // 名称用于在生成资源时判断是否为当前子编译器的资源
+                childCompiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+                    compilation.__name = name;
+                    compilation.__tag = CHILD_COMPILER_TAG;
+                });
                 promises.push(new Promise((resolve, reject) => {
                     childCompiler.runAsChild(err => {
                         if (err) {
@@ -727,16 +875,17 @@ class TaroMiniPlugin {
                 item['selectedIconPath'] && this.tabBarIcons.add(item['selectedIconPath']);
             });
             if (tabBar.custom) {
-                const customTabBarPath = path_1.default.join(sourceDir, 'custom-tab-bar');
+                const isAlipay = process.env.TARO_ENV === 'alipay';
+                const customTabBarPath = path_1.default.join(sourceDir, isAlipay ? 'customize-tab-bar' : 'custom-tab-bar');
                 const customTabBarComponentPath = (0, helper_1.resolveMainFilePath)(customTabBarPath, [...frameworkExts, ...helper_1.SCRIPT_EXT]);
-                if (fs_extra_1.default.existsSync(customTabBarComponentPath)) {
+                if (helper_1.fs.existsSync(customTabBarComponentPath)) {
                     const customTabBarComponentTemplPath = this.getTemplatePath(customTabBarComponentPath);
                     const isNative = this.isNativePageORComponent(customTabBarComponentTemplPath);
                     if (!this.isWatch && ((_a = this.options.logger) === null || _a === void 0 ? void 0 : _a.quiet) === false) {
                         (0, helper_1.printLog)("compile" /* processTypeEnum.COMPILE */, '自定义 tabBar', this.getShowPath(customTabBarComponentPath));
                     }
                     const componentObj = {
-                        name: 'custom-tab-bar/index',
+                        name: isAlipay ? 'customize-tab-bar/index' : 'custom-tab-bar/index',
                         path: customTabBarComponentPath,
                         isNative,
                         stylePath: isNative ? this.getStylePath(customTabBarComponentPath) : undefined,
@@ -750,43 +899,114 @@ class TaroMiniPlugin {
     }
     /** 是否为小程序原生页面或组件 */
     isNativePageORComponent(templatePath) {
-        return fs_extra_1.default.existsSync(templatePath);
+        return helper_1.fs.existsSync(templatePath);
     }
     getShowPath(filePath) {
         return filePath.replace(this.context, '').replace(/\\/g, '/').replace(/^\//, '');
     }
+    // 调整 config 文件中 usingComponents 的路径
+    // 1. 将 node_modules 调整为 npm
+    // 2. 将 ../../../node_modules/xxx 调整为 /npm/xxx
+    adjustConfigContent(config) {
+        const { usingComponents } = config;
+        if (!usingComponents || this.options.skipProcessUsingComponents)
+            return;
+        for (const [key, value] of Object.entries(usingComponents)) {
+            if (!value.includes(helper_1.NODE_MODULES))
+                return;
+            const match = value.replace(helper_1.NODE_MODULES, 'npm').match(/npm.*/);
+            usingComponents[key] = match ? `${path_1.default.sep}${match[0]}` : value;
+        }
+    }
+    /** 生成小程序独立分包的相关文件 */
+    generateIndependentMiniFiles(compilation, compiler) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { template, isBuildPlugin, sourceDir } = this.options;
+            const baseTemplateName = this.getIsBuildPluginPath('base', isBuildPlugin);
+            const isUsingCustomWrapper = component_1.componentConfig.thirdPartyComponents.has('custom-wrapper');
+            // @ts-ignore
+            const childName = compilation.__name;
+            // 为独立分包生成 base/comp/custom-wrapper
+            this.independentPackages.forEach((_pages, name) => {
+                // independentPackages 是包含了所有 ChildCompiler 的资源，如果不是当前 ChildCompiler 的资源不做处理
+                if (name !== childName)
+                    return;
+                this.generateTemplateFile(compilation, compiler, `${name}/${baseTemplateName}`, template.buildTemplate, component_1.componentConfig);
+                if (!template.isSupportRecursive) {
+                    // 如微信、QQ 不支持递归模版的小程序，需要使用自定义组件协助递归
+                    this.generateConfigFile(compilation, compiler, `${name}/${baseCompName}`, {
+                        component: true,
+                        usingComponents: {
+                            [baseCompName]: `./${baseCompName}`,
+                            [customWrapperName]: `./${customWrapperName}`
+                        }
+                    });
+                    this.generateTemplateFile(compilation, compiler, `${name}/${baseCompName}`, template.buildBaseComponentTemplate, this.options.fileType.templ);
+                }
+                this.generateConfigFile(compilation, compiler, `${name}/${customWrapperName}`, {
+                    component: true,
+                    usingComponents: {
+                        [customWrapperName]: `./${customWrapperName}`
+                    }
+                });
+                this.generateTemplateFile(compilation, compiler, `${name}/${customWrapperName}`, template.buildCustomComponentTemplate, this.options.fileType.templ);
+                this.generateXSFile(compilation, compiler, `${name}/utils`, isBuildPlugin);
+            });
+            this.pages.forEach(page => {
+                let importBaseTemplatePath = (0, helper_1.promoteRelativePath)(path_1.default.relative(page.path, path_1.default.join(sourceDir, this.getTemplatePath(baseTemplateName))));
+                const config = this.filesConfig[this.getConfigFilePath(page.name)];
+                let isIndependent = false;
+                let independentName = '';
+                this.independentPackages.forEach((pages, name) => {
+                    // independentPackages 是包含了所有 ChildCompiler 的资源，如果不是当前 ChildCompiler 的资源不做处理
+                    if (pages.includes(page.path) && name === childName) {
+                        isIndependent = true;
+                        independentName = name;
+                        importBaseTemplatePath = (0, helper_1.promoteRelativePath)(path_1.default.relative(page.path, path_1.default.join(sourceDir, name, this.getTemplatePath(baseTemplateName))));
+                    }
+                });
+                if (!isIndependent)
+                    return;
+                if (config) {
+                    const importBaseCompPath = (0, helper_1.promoteRelativePath)(path_1.default.relative(page.path, path_1.default.join(sourceDir, independentName, this.getTargetFilePath(this.getIsBuildPluginPath(baseCompName, isBuildPlugin), ''))));
+                    const importCustomWrapperPath = (0, helper_1.promoteRelativePath)(path_1.default.relative(page.path, path_1.default.join(sourceDir, independentName, this.getTargetFilePath(this.getIsBuildPluginPath(customWrapperName, isBuildPlugin), ''))));
+                    config.content.usingComponents = Object.assign({}, config.content.usingComponents);
+                    if (isUsingCustomWrapper) {
+                        config.content.usingComponents[customWrapperName] = importCustomWrapperPath;
+                    }
+                    if (!template.isSupportRecursive && !page.isNative) {
+                        config.content.usingComponents[baseCompName] = importBaseCompPath;
+                    }
+                    this.generateConfigFile(compilation, compiler, page.path, config.content);
+                }
+                if (!page.isNative) {
+                    this.generateTemplateFile(compilation, compiler, page.path, template.buildPageTemplate, importBaseTemplatePath);
+                }
+            });
+        });
+    }
     /** 生成小程序相关文件 */
     generateMiniFiles(compilation, compiler) {
         return __awaiter(this, void 0, void 0, function* () {
             const { RawSource } = compiler.webpack.sources;
-            const { template, modifyBuildAssets, modifyMiniConfigs, isBuildPlugin, sourceDir } = this.options;
+            const { template, modifyMiniConfigs, isBuildPlugin, sourceDir } = this.options;
             const baseTemplateName = this.getIsBuildPluginPath('base', isBuildPlugin);
-            const baseCompName = 'comp';
-            const customWrapperName = 'custom-wrapper';
             const isUsingCustomWrapper = component_1.componentConfig.thirdPartyComponents.has('custom-wrapper');
             /**
              * 与原生小程序混写时解析模板与样式
              */
             compilation.getAssets().forEach(({ name: assetPath }) => {
                 const styleExt = this.options.fileType.style;
-                const templExt = this.options.fileType.templ;
-                if (new RegExp(`(\\${styleExt}|\\${templExt})\\.js(\\.map){0,1}$`).test(assetPath)) {
-                    delete compilation.assets[assetPath];
-                }
-                else if (new RegExp(`${styleExt}${styleExt}$`).test(assetPath)) {
+                if (new RegExp(`${styleExt}${styleExt}$`).test(assetPath)) {
                     const assetObj = compilation.assets[assetPath];
                     const newAssetPath = assetPath.replace(styleExt, '');
                     compilation.assets[newAssetPath] = assetObj;
-                    delete compilation.assets[assetPath];
-                }
-                if (!isUsingCustomWrapper && assetPath === 'custom-wrapper.js') {
-                    delete compilation.assets[assetPath];
                 }
             });
             if (typeof modifyMiniConfigs === 'function') {
                 yield modifyMiniConfigs(this.filesConfig);
             }
-            if (!this.options.blended && !isBuildPlugin) {
+            if ((!this.options.blended || !this.options.newBlended) && !isBuildPlugin) {
                 const appConfigPath = this.getConfigFilePath(this.appEntry);
                 const appConfigName = path_1.default.basename(appConfigPath).replace(path_1.default.extname(appConfigPath), '');
                 this.generateConfigFile(compilation, compiler, this.appEntry, this.filesConfig[appConfigName].content);
@@ -801,7 +1021,7 @@ class TaroMiniPlugin {
                     }
                 };
                 if (isUsingCustomWrapper) {
-                    baseCompConfig[customWrapperName] = `./${customWrapperName}`;
+                    baseCompConfig.usingComponents[customWrapperName] = `./${customWrapperName}`;
                     this.generateConfigFile(compilation, compiler, this.getIsBuildPluginPath(customWrapperName, isBuildPlugin), {
                         component: true,
                         usingComponents: {
@@ -825,29 +1045,6 @@ class TaroMiniPlugin {
             this.generateTemplateFile(compilation, compiler, baseTemplateName, template.buildTemplate, component_1.componentConfig);
             isUsingCustomWrapper && this.generateTemplateFile(compilation, compiler, this.getIsBuildPluginPath(customWrapperName, isBuildPlugin), template.buildCustomComponentTemplate, this.options.fileType.templ);
             this.generateXSFile(compilation, compiler, 'utils', isBuildPlugin);
-            // 为独立分包生成 base/comp/custom-wrapper
-            this.independentPackages.forEach((_pages, name) => {
-                this.generateTemplateFile(compilation, compiler, `${name}/${baseTemplateName}`, template.buildTemplate, component_1.componentConfig);
-                if (!template.isSupportRecursive) {
-                    // 如微信、QQ 不支持递归模版的小程序，需要使用自定义组件协助递归
-                    this.generateConfigFile(compilation, compiler, `${name}/${baseCompName}`, {
-                        component: true,
-                        usingComponents: {
-                            [baseCompName]: `./${baseCompName}`,
-                            [customWrapperName]: `./${customWrapperName}`
-                        }
-                    });
-                    this.generateTemplateFile(compilation, compiler, `${name}/${baseCompName}`, template.buildBaseComponentTemplate, this.options.fileType.templ);
-                }
-                this.generateConfigFile(compilation, compiler, `${name}/${customWrapperName}`, {
-                    component: true,
-                    usingComponents: {
-                        [customWrapperName]: `./${customWrapperName}`
-                    }
-                });
-                this.generateTemplateFile(compilation, compiler, `${name}/${customWrapperName}`, template.buildCustomComponentTemplate, this.options.fileType.templ);
-                this.generateXSFile(compilation, compiler, `${name}/utils`, isBuildPlugin);
-            });
             this.components.forEach(component => {
                 const importBaseTemplatePath = (0, helper_1.promoteRelativePath)(path_1.default.relative(component.path, path_1.default.join(sourceDir, this.getTemplatePath(baseTemplateName))));
                 const config = this.filesConfig[this.getConfigFilePath(component.name)];
@@ -859,24 +1056,20 @@ class TaroMiniPlugin {
                 }
             });
             this.pages.forEach(page => {
-                let importBaseTemplatePath = (0, helper_1.promoteRelativePath)(path_1.default.relative(page.path, path_1.default.join(sourceDir, this.getTemplatePath(baseTemplateName))));
+                const importBaseTemplatePath = (0, helper_1.promoteRelativePath)(path_1.default.relative(page.path, path_1.default.join(sourceDir, this.getTemplatePath(baseTemplateName))));
                 const config = this.filesConfig[this.getConfigFilePath(page.name)];
                 let isIndependent = false;
-                let independentName = '';
-                this.independentPackages.forEach((pages, name) => {
+                // pages 里面会混合独立分包的，在这里需要过滤一下，避免重复生成 assets
+                this.independentPackages.forEach(pages => {
                     if (pages.includes(page.path)) {
                         isIndependent = true;
-                        independentName = name;
-                        importBaseTemplatePath = (0, helper_1.promoteRelativePath)(path_1.default.relative(page.path, path_1.default.join(sourceDir, name, this.getTemplatePath(baseTemplateName))));
                     }
                 });
+                if (isIndependent)
+                    return;
                 if (config) {
-                    let importBaseCompPath = (0, helper_1.promoteRelativePath)(path_1.default.relative(page.path, path_1.default.join(sourceDir, this.getTargetFilePath(this.getIsBuildPluginPath(baseCompName, isBuildPlugin), ''))));
-                    let importCustomWrapperPath = (0, helper_1.promoteRelativePath)(path_1.default.relative(page.path, path_1.default.join(sourceDir, this.getTargetFilePath(this.getIsBuildPluginPath(customWrapperName, isBuildPlugin), ''))));
-                    if (isIndependent) {
-                        importBaseCompPath = (0, helper_1.promoteRelativePath)(path_1.default.relative(page.path, path_1.default.join(sourceDir, independentName, this.getTargetFilePath(this.getIsBuildPluginPath(baseCompName, isBuildPlugin), ''))));
-                        importCustomWrapperPath = (0, helper_1.promoteRelativePath)(path_1.default.relative(page.path, path_1.default.join(sourceDir, independentName, this.getTargetFilePath(this.getIsBuildPluginPath(customWrapperName, isBuildPlugin), ''))));
-                    }
+                    const importBaseCompPath = (0, helper_1.promoteRelativePath)(path_1.default.relative(page.path, path_1.default.join(sourceDir, this.getTargetFilePath(this.getIsBuildPluginPath(baseCompName, isBuildPlugin), ''))));
+                    const importCustomWrapperPath = (0, helper_1.promoteRelativePath)(path_1.default.relative(page.path, path_1.default.join(sourceDir, this.getTargetFilePath(this.getIsBuildPluginPath(customWrapperName, isBuildPlugin), ''))));
                     config.content.usingComponents = Object.assign({}, config.content.usingComponents);
                     if (isUsingCustomWrapper) {
                         config.content.usingComponents[customWrapperName] = importCustomWrapperPath;
@@ -897,16 +1090,34 @@ class TaroMiniPlugin {
             }
             if (isBuildPlugin) {
                 const pluginJSONPath = path_1.default.join(sourceDir, 'plugin', 'plugin.json');
-                if (fs_extra_1.default.existsSync(pluginJSONPath)) {
-                    const pluginJSON = fs_extra_1.default.readJSONSync(pluginJSONPath);
+                if (helper_1.fs.existsSync(pluginJSONPath)) {
+                    const pluginJSON = helper_1.fs.readJSONSync(pluginJSONPath);
                     this.modifyPluginJSON(pluginJSON);
                     const relativePath = pluginJSONPath.replace(sourceDir, '').replace(/\\/g, '/');
                     compilation.assets[relativePath] = new RawSource(JSON.stringify(pluginJSON));
                 }
             }
-            if (typeof modifyBuildAssets === 'function') {
-                yield modifyBuildAssets(compilation.assets, this);
-            }
+        });
+    }
+    optimizeMiniFiles(compilation, _compiler) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const isUsingCustomWrapper = component_1.componentConfig.thirdPartyComponents.has('custom-wrapper');
+            /**
+             * 与原生小程序混写时解析模板与样式
+             */
+            compilation.getAssets().forEach(({ name: assetPath }) => {
+                const styleExt = this.options.fileType.style;
+                const templExt = this.options.fileType.templ;
+                if (new RegExp(`(\\${styleExt}|\\${templExt})\\.js(\\.map){0,1}$`).test(assetPath)) {
+                    delete compilation.assets[assetPath];
+                }
+                else if (new RegExp(`${styleExt}${styleExt}$`).test(assetPath)) {
+                    delete compilation.assets[assetPath];
+                }
+                if (!isUsingCustomWrapper && assetPath === 'custom-wrapper.js') {
+                    delete compilation.assets[assetPath];
+                }
+            });
         });
     }
     generateConfigFile(compilation, compiler, filePath, config) {
@@ -916,6 +1127,7 @@ class TaroMiniPlugin {
         unofficialConfigs.forEach(item => {
             delete config[item];
         });
+        this.adjustConfigContent(config);
         const fileConfigStr = JSON.stringify(config);
         compilation.assets[fileConfigName] = new RawSource(fileConfigStr);
     }
@@ -993,8 +1205,8 @@ class TaroMiniPlugin {
     generateDarkModeFile(compilation, { webpack }) {
         const { RawSource } = webpack.sources;
         const themeLocationPath = path_1.default.resolve(this.options.sourceDir, this.themeLocation);
-        if (fs_extra_1.default.existsSync(themeLocationPath)) {
-            const themeLocationSource = fs_extra_1.default.readFileSync(themeLocationPath);
+        if (helper_1.fs.existsSync(themeLocationPath)) {
+            const themeLocationSource = helper_1.fs.readFileSync(themeLocationPath);
             compilation.assets[this.themeLocation] = new RawSource(themeLocationSource);
         }
     }
@@ -1005,8 +1217,8 @@ class TaroMiniPlugin {
         const { RawSource } = webpack.sources;
         this.tabBarIcons.forEach(icon => {
             const iconPath = path_1.default.resolve(this.options.sourceDir, icon);
-            if (fs_extra_1.default.existsSync(iconPath)) {
-                const iconSource = fs_extra_1.default.readFileSync(iconPath);
+            if (helper_1.fs.existsSync(iconPath)) {
+                const iconSource = helper_1.fs.readFileSync(iconPath);
                 compilation.assets[icon] = new RawSource(iconSource);
             }
         });
@@ -1015,22 +1227,66 @@ class TaroMiniPlugin {
      * 小程序全局样式文件中引入 common chunks 中的公共样式文件
      */
     injectCommonStyles({ assets }, { webpack }) {
-        const { ConcatSource } = webpack.sources;
+        const { newBlended } = this.options;
+        const { ConcatSource, RawSource } = webpack.sources;
         const styleExt = this.options.fileType.style;
         const appStyle = `app${styleExt}`;
         const REG_STYLE_EXT = new RegExp(`\\.(${styleExt.replace('.', '')})(\\?.*)?$`);
-        if (!assets[appStyle])
-            return;
-        const originSource = assets[appStyle];
-        const source = new ConcatSource(originSource);
+        const originSource = assets[appStyle] || new RawSource('');
+        const commons = new ConcatSource('');
+        const componentCommons = [];
+        const independentPackageNames = [];
+        this.independentPackages.forEach((_, name) => { independentPackageNames.push(name); });
         Object.keys(assets).forEach(assetName => {
             const fileName = path_1.default.basename(assetName, path_1.default.extname(assetName));
-            if ((helper_1.REG_STYLE.test(assetName) || REG_STYLE_EXT.test(assetName)) && this.options.commonChunks.includes(fileName)) {
-                source.add('\n');
-                source.add(`@import ${JSON.stringify((0, loader_utils_1.urlToRequest)(assetName))};`);
-                assets[appStyle] = source;
+            if ((helper_1.REG_STYLE.test(assetName) || REG_STYLE_EXT.test(assetName))
+                && this.options.commonChunks.includes(fileName)
+                // app.wxss 不能引入独立分包中的 common 样式文件
+                && independentPackageNames.every(name => !assetName.includes(name))) {
+                commons.add('\n');
+                commons.add(`@import ${JSON.stringify((0, loader_utils_1.urlToRequest)(assetName))};`);
+                componentCommons.push(assetName);
             }
         });
+        if (commons.size() > 0) {
+            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);
+            source.add('\n');
+            assets[appStyle] = source;
+            if (newBlended) {
+                // 本地化组件引入common公共样式文件
+                this.pages.forEach(page => {
+                    if (page.isNative)
+                        return;
+                    const pageStyle = `${page.name}${styleExt}`;
+                    if (this.nativeComponents.has(page.name)) {
+                        // 本地化组件如果没有wxss则直接写入一个空的
+                        if (!(pageStyle in assets)) {
+                            assets[pageStyle] = new ConcatSource('');
+                        }
+                        const source = new ConcatSource('');
+                        const originSource = assets[pageStyle];
+                        componentCommons.forEach(item => {
+                            source.add(`@import ${JSON.stringify((0, loader_utils_1.urlToRequest)(path_1.default.relative(path_1.default.dirname(pageStyle), item)))};\n`);
+                        });
+                        source.add(originSource);
+                        assets[pageStyle] = source;
+                    }
+                    else {
+                        if (pageStyle in assets) {
+                            const source = new ConcatSource('');
+                            const originSource = assets[pageStyle];
+                            source.add(`@import ${JSON.stringify((0, loader_utils_1.urlToRequest)(path_1.default.relative(path_1.default.dirname(pageStyle), 'app.wxss')))};\n`);
+                            source.add(originSource);
+                            assets[pageStyle] = source;
+                        }
+                    }
+                });
+            }
+        }
     }
     addTarBarFilesToDependencies(compilation) {
         const { fileDependencies, missingDependencies } = compilation;