微前端qiankun使用webpack 5 module federation实施详解

随着微服务架构的流行，微前端的概念也应运而生。微前端是一种构建现代化web应用的架构模式，它将前端应用程序分解为多个独立的模块，每个模块都可以在单独的环境中开发、测试和部署。这使得前端应用程序更加灵活、可维护和可扩展。

webpack 5 module federation是实现微前端架构的一个有力工具。它允许我们将不同的前端应用程序模块打包成一个单一的应用程序，而无需将它们合并到一个代码库中。这使得我们可以独立地开发、测试和部署每个模块，而无需担心对其他模块的影响。

qiankun是一个基于webpack 5 module federation的微前端框架。它提供了许多开箱即用的功能，使我们可以轻松地将不同的前端应用程序模块集成到一个单一的应用程序中。

在本文中，我们将介绍如何使用webpack 5 module federation和qiankun来构建一个颗粒化、独立构建的微前端应用程序。

1. 安装依赖

首先，我们需要安装webpack 5 module federation和qiankun的依赖：

npm install --save-dev webpack webpack-cli webpack-dev-server webpack-merge webpack-manifest-plugin
npm install --save-dev @module-federation/webpack webpack-plugin-import-type module-federation-tools
npm install --save qiankun

2. 创建webpack配置

接下来，我们需要创建一个webpack配置。在这个配置中，我们将指定应用程序的入口文件、输出目录以及要使用的插件。

const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const webpackDevServer = require('webpack-dev-server');
const webpackManifestPlugin = require('webpack-manifest-plugin');
const moduleFederationPlugin = require('@module-federation/webpack');
const importTypePlugin = require('webpack-plugin-import-type');
const moduleFederationTools = require('module-federation-tools');

const mode = process.env.NODE_ENV || 'development';
const isProduction = mode === 'production';

const commonConfig = {
  mode,
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash].js',
    publicPath: 'http://localhost:8080/',
  },
  plugins: [
    new webpackMerge.MergeJsonPlugin({
      output: {
        publicPath: 'http://localhost:8080/',
      },
    }),
    new webpackManifestPlugin(),
    new moduleFederationPlugin({
      name: 'qiankun',
      filename: 'remoteEntry.js',
      exposes: {
        './App': './src/App.js',
      },
    }),
  ],
};

const devConfig = {
  devServer: {
    port: 8080,
    historyApiFallback: true,
  },
};

const prodConfig = {
  plugins: [
    new importTypePlugin({
      libraryName: 'qiankun',
      style: true,
    }),
  ],
};

const config = isProduction ? webpackMerge.merge(commonConfig, prodConfig) : webpackMerge.merge(commonConfig, devConfig);

module.exports = config;

3. 创建qiankun配置

接下来，我们需要创建一个qiankun配置。在这个配置中，我们将指定要加载的远程应用程序模块以及要使用的生命周期钩子。

const qiankun = require('qiankun');

qiankun.register({
  name: 'qiankun-app',
  entry: 'http://localhost:8080/remoteEntry.js',
});

qiankun.start();

4. 运行应用程序

最后，我们可以使用以下命令运行应用程序：

npm start

现在，您就可以使用webpack 5 module federation和qiankun构建一个颗粒化、独立构建的微前端应用程序了。