面试题：Webpack自定义加载器在跨框架微前端架构中的应用场景

加载器设计

编写通用加载器：设计一个Webpack加载器，它能够识别不同框架模块的格式。例如，对于Vue模块，可以通过识别.vue文件扩展名，并使用vue - loader的相关逻辑进行处理。对于React模块，识别.jsx或.js扩展名，结合Babel进行转换。
处理模块依赖：加载器需要处理模块之间的依赖关系。在加载Vue模块时，确保其依赖的Vue相关库（如Vue Router、Vuex等）能够正确加载。同样，对于React模块，要处理好React和React DOM等依赖。这可以通过在加载器中分析模块的import语句，然后使用Webpack的依赖解析机制来实现。
框架特定转换：针对不同框架进行特定的转换。比如，Vue的单文件组件（.vue）需要经过vue - loader的转换，将模板、脚本和样式分离并进行相应处理。而React的JSX需要Babel转换为普通JavaScript。加载器应根据框架类型调用相应的转换工具。

Webpack配置

模块规则：在Webpack的module.rules中配置不同框架模块的处理规则。例如：

module.exports = {
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: 'vue - loader'
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel - loader',
                    options: {
                        presets: ['@babel/preset - react']
                    }
                }
            },
            // 其他框架（如Angular）类似配置
        ]
    }
};

解析配置：配置Webpack的解析选项，确保它能正确解析不同框架模块的导入路径。例如，对于Vue的别名配置：

const path = require('path');
module.exports = {
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    }
};

插件配置：使用一些Webpack插件来辅助不同框架模块的集成。例如，HtmlWebpackPlugin可以用于生成HTML文件，确保各个微前端应用的资源（如脚本、样式）正确引入。对于Vue应用，可以使用VueLoaderPlugin：

const VueLoaderPlugin = require('vue - loader/lib/plugin');
module.exports = {
    plugins: [
        new VueLoaderPlugin()
    ]
};

运行时交互机制

微前端框架：选择合适的微前端框架，如qiankun等。这些框架提供了在运行时加载和挂载不同前端框架微应用的能力。例如，使用qiankun，可以在主应用中通过以下方式加载Vue微应用：

import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
    {
        name: 'vue - app',
        entry: '//localhost:3000',
        container: '#vue - container',
        activeRule: '/vue - app'
    }
]);
start();

通信机制：建立统一的通信机制，使不同框架的微前端应用能够交互。可以使用EventBus（如mitt库），在主应用中创建一个全局的事件总线实例，各个微前端应用通过这个实例进行事件的发布和订阅。例如：

// 主应用中创建EventBus
import mitt from'mitt';
const eventBus = mitt();
window.eventBus = eventBus;

// React微应用订阅事件
import React, { useEffect } from'react';
const ReactApp = () => {
    useEffect(() => {
        const handleEvent = () => {
            console.log('Received event in React app');
        };
        window.eventBus.on('custom - event', handleEvent);
        return () => {
            window.eventBus.off('custom - event', handleEvent);
        };
    }, []);
    return <div>React App</div>;
};

// Vue微应用发布事件
export default {
    mounted() {
        window.eventBus.emit('custom - event');
    }
};

共享状态管理：对于需要共享的数据，可以采用共享状态管理方案。例如，使用Redux或Vuex进行状态管理时，可以在主应用中创建一个共享的状态仓库，并通过特定的机制（如事件驱动或直接传递引用）让各个微前端应用能够访问和修改共享状态。

星途面试题库

面试题：Webpack自定义加载器在跨框架微前端架构中的应用场景

知识考点

面试题答案

加载器设计

Webpack配置

运行时交互机制