对于主机应用程序的微前端依赖项，返回 404 未找到

Question

我正在尝试使用模块联合作为集成工具在微前端上实现 POC。我能够单独运行微前端（在端口4001上运行），但是当我尝试运行集成了微前端的主机应用程序（在端口4000上运行）时，它抛出错误，表示无法找到 MF依赖项即react-redux和redux工具包，如下图所示。主机应用程序没有react-redux和redux工具包作为依赖项，我不确定为什么它试图从端口4000而不是4001获取依赖项。我可以知道如何解决这个问题吗？

主机-webpack.config

const config: Configuration = {
    mode: 'development',
    output: {
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.(ts|js)x?$/i,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env',
                            '@babel/preset-react',
                            '@babel/preset-typescript'
                        ]
                    }
                }
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    plugins: [
        new ModuleFederationPlugin({
            name: 'container',
            remotes: {
                mf1: 'mf1@http://localhost:4001/remoteEntry.js'
            },
            shared: [deps]
        }),
        new HtmlWebpackPlugin({
            template: 'public/index.html'
        }),
        new HotModuleReplacementPlugin(),
        new ForkTsCheckerWebpackPlugin({
            async: false
        }),
        new ESLintPlugin({
            extensions: ['js', 'jsx', 'ts', 'tsx']
        })
    ],
    devtool: 'inline-source-map',
    devServer: {
        static: path.join(__dirname, 'build'),
        historyApiFallback: true,
        port: 4000,
        open: true
    }
};

export default config;

MF-webpack.config.js

const config: Configuration = {
    mode: 'development',
    output: {
        publicPath: '/'
    },
    entry: './src/index',
    module: {
        rules: [
            {
                test: /\.(ts|js)x?$/i,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env',
                            '@babel/preset-react',
                            '@babel/preset-typescript'
                        ]
                    }
                }
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    plugins: [
        new ModuleFederationPlugin({
            name: 'mf1',
            filename: 'remoteEntry.js',
            library: {type: 'var', name: 'mf1'},
            exposes: {
                './Mf1App': './src/bootstrap'
            },
            shared: [deps]
        }),
        new HtmlWebpackPlugin({
            template: 'public/index.html'
        }),
        new HotModuleReplacementPlugin(),
        new ForkTsCheckerWebpackPlugin({
            async: false
        }),
        new ESLintPlugin({
            extensions: ['js', 'jsx', 'ts', 'tsx']
        })
    ],
    devtool: 'inline-source-map',
    devServer: {
        static: path.join(__dirname, 'build'),
        historyApiFallback: true,
        port: 4001,
        open: true
    }
};

export default config;

主机包.json

{
    "name": "container",
    "version": "1.0.0",
    "description": "",
    "main": "index.ts",
    "scripts": {
        "start": "webpack serve --config config/webpack.dev.config.ts",
        "build": "webpack --config config/webpack.prod.config.ts",
        "lint": "eslint \"*/**/*.{js,ts,tsx}\"",
        "lint:fix": "eslint \"*/**/*.{js,ts,tsx}\" --fix"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.15.8",
        "@babel/plugin-transform-runtime": "^7.15.8",
        "@babel/preset-env": "^7.15.8",
        "@babel/preset-react": "^7.14.5",
        "@babel/preset-typescript": "^7.15.0",
        "@babel/runtime": "^7.15.4",
        "@types/node": "^16.10.9",
        "@types/react": "^17.0.29",
        "@types/react-dom": "^17.0.9",
        "@types/webpack": "^5.28.0",
        "@types/webpack-dev-server": "^4.3.1",
        "@typescript-eslint/eslint-plugin": "^5.0.0",
        "@typescript-eslint/parser": "^5.0.0",
        "babel-loader": "^8.2.2",
        "eslint": "^8.0.1",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-import": "^2.25.2",
        "eslint-plugin-prettier": "^4.0.0",
        "eslint-plugin-react": "^7.26.1",
        "eslint-plugin-react-hooks": "^4.2.0",
        "fork-ts-checker-webpack-plugin": "^6.3.4",
        "html-webpack-plugin": "^5.3.2",
        "prettier": "^2.4.1",
        "ts-node": "^10.3.0",
        "tsconfig-paths-webpack-plugin": "^3.5.1",
        "webpack": "^5.58.2",
        "webpack-cli": "^4.9.0",
        "webpack-dev-server": "^4.3.1",
        "@types/fork-ts-checker-webpack-plugin": "^0.4.5",
        "clean-webpack-plugin": "^3.0.0",
        "typescript": "^4.4.4",
        "eslint-webpack-plugin": "^2.4.1"
    },
    "dependencies": {
        "react": "^17.0.2",
        "react-dom": "^17.0.2"
    }
}

MF1-package.json

{
    "name": "microfrontend1",
    "version": "1.0.0",
    "description": "",
    "main": "index.ts",
    "scripts": {
        "start": "webpack serve --config config/webpack.dev.config.ts",
        "build": "webpack --config config/webpack.prod.config.ts",
        "lint": "eslint \"*/**/*.{js,ts,tsx}\"",
        "lint:fix": "eslint \"*/**/*.{js,ts,tsx}\" --fix"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.15.8",
        "@babel/plugin-transform-runtime": "^7.15.8",
        "@babel/preset-env": "^7.15.8",
        "@babel/preset-react": "^7.14.5",
        "@babel/preset-typescript": "^7.15.0",
        "@babel/runtime": "^7.15.4",
        "@types/node": "^16.10.9",
        "@types/react": "^17.0.29",
        "@types/react-dom": "^17.0.9",
        "@types/webpack": "^5.28.0",
        "@types/react-redux": "^7.1.19",
        "@types/webpack-dev-server": "^4.3.1",
        "@typescript-eslint/eslint-plugin": "^5.0.0",
        "@typescript-eslint/parser": "^5.0.0",
        "babel-loader": "^8.2.2",
        "eslint": "^8.0.1",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-import": "^2.25.2",
        "eslint-plugin-prettier": "^4.0.0",
        "eslint-plugin-react": "^7.26.1",
        "eslint-plugin-react-hooks": "^4.2.0",
        "fork-ts-checker-webpack-plugin": "^6.3.4",
        "html-webpack-plugin": "^5.3.2",
        "prettier": "^2.4.1",
        "ts-node": "^10.3.0",
        "tsconfig-paths-webpack-plugin": "^3.5.1",
        "webpack": "^5.58.2",
        "webpack-cli": "^4.9.0",
        "webpack-dev-server": "^4.3.1",
        "@types/fork-ts-checker-webpack-plugin": "^0.4.5",
        "clean-webpack-plugin": "^3.0.0",
        "typescript": "^4.4.4",
        "eslint-webpack-plugin": "^2.4.1"
    },
    "dependencies": {
        "@reduxjs/toolkit": "^1.6.2",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-redux": "^7.2.5"
    }
}

Answer 1

在 MF webpack.config.js 中更新输出对象，如下所示：

`output: {
   publicPath: 'http://localhost:4001/'
}`

让我知道是否有帮助。