动态加载远程模块时，Webpack 5 模块联合缺少块

问题描述

我正在尝试使用 webpack 模块联合将大型单体 React 应用程序拆分为微前端。 我已经部署了远程模块并且在本地运行开发服务器时运行良好，一切正常。 但是在运行 yarn build 并部署消费者应用程序后，它失败并显示以下错误：

Uncaught (in promise) ChunkLoadError: Loading chunk 935 Failed.

注释掉延迟加载的远程模块时，一切正常。

有人知道如何使用远程加载的模块正确构建 webpack 吗？

这是我的消费者组件：

import WorkOrderTrackingErrorBoundary from './work_order_tracking_error_boundary'
const WorkOrderTracking = lazy(() => import('dMove/WorkOrderTracking'))

const WorkOrderTrackingPage = (props) => {
    const spinner = (
        <SpinnerContainer>
            <Spinner type="bars" color="#3e145e" width="48px"/>
        </SpinnerContainer>
    )


    return (
        <Suspense fallback={spinner}>
            <WorkOrderTrackingErrorBoundary>
                <WorkOrderTracking/>
            </WorkOrderTrackingErrorBoundary>
        </Suspense>
    );
};

export default WorkOrderTrackingPage;

这是我的 webpack.prod.config.js 文件：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const StringReplacePlugin = require('string-replace-webpack-plugin');
const NodepolyfillPlugin = require("node-polyfill-webpack-plugin")
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

const paths = require('./paths');
const path = require('path');

module.exports = {
    bail: true,mode: 'production',devtool: 'source-map',module: {
        rules: [
            {
                oneOf: [
                    {
                        test: /\.(js|jsx)$/,exclude: paths.appNodeModules,use: {
                            loader: 'babel-loader'
                        }
                    },{
                        test: /\.html$/,use: [
                            {
                                loader: 'html-loader'
                            }
                        ]
                    },{
                        test: [
                            /\.bmp$/,/\.gif$/,/\.jpe?g$/,/\.png$/,/\.svg$/
                        ],loader: require.resolve('url-loader'),options: {
                            limit: 10000,name: 'static/media/[name].[hash:8].[ext]'
                        }
                    },{
                        exclude: [paths.appResources,paths.appNodeModules],test: /\.css$/,use: [
                            require.resolve('style-loader'),{
                                loader: require.resolve('css-loader'),options: {
                                    importLoaders: 1,modules: true,localIdentName: '[name]__[local]___[hash:base64:5]'
                                }
                            }
                        ]
                    },{
                        include: [paths.appResources,use: [
                            {
                                loader: 'style-loader' // creates style nodes from JS strings
                            },{
                                loader: 'css-loader' // translates CSS into Commonjs
                            }
                        ]
                    },{
                        exclude: [/\.(js|jsx|mjs)$/,/\.html$/,/\.json$/],loader: require.resolve('file-loader'),options: {
                            name: 'static/media/[name].[hash:8].[ext]'
                        }
                    }
                ]
            }
        ]
    },plugins: [
        new ModuleFederationPlugin({
            name: "dView",// name of this project
            filename: "remoteEntry.js",// entry file to this project,remoteEntry.js is the conventional name
            exposes: {
                // components exposed out for other projects to consume
            },remotes: {
                // projects to consume
                dMove: "dMove@https://dmove-dev.3dsignals.io/remoteEntry.js"
            },shared: {
                // shared modules between projects
                react: {singleton: true},"react-dom": {singleton: true}
            }
        }),new webpack.DefinePlugin({
            "GET_API_TOKEN_URL": JSON.stringify("/security/getAPIToken"),"GET_REFRESH_TOKEN_URL": JSON.stringify("/security/refreshToken"),"LOGIN_WITH_FOREIGN_IDM": JSON.stringify("/security/foreignLogin"),"MAPBox_API_TOKEN": JSON.stringify("pk.eyJ1IjoiM2RzZGV2b3BzIiwiYSI6ImNrazB2ZHJ2bTBsOTMydnJ1cG40dxc2NjYifQ.pGAk7cQ-ekRJY9KSSrW3lg")
        }),new StringReplacePlugin(),new HtmlWebpackPlugin({
            inject: true,template: paths.appHtml,minify: {
                removeComments: true,collapseWhitespace: true,removeRedundantAttributes: true,useShortDoctype: true,removeEmptyAttributes: true,removeStyleLinkTypeAttributes: true,keepClosingSlash: true,minifyJS: true,minifyCSS: true,minifyURLs: true
            }
        }),new NodepolyfillPlugin()
    ],output: {
        filename: 'static/js/bundle.js',chunkFilename: 'static/js/[name].[contenthash].chunk.js',publicPath: '/',path: paths.appBuild,devtoolmodulefilenameTemplate: info =>
            path.resolve(info.absoluteResourcePath).replace(/\\/g,'/')
    },entry: [
        '@babel/polyfill',paths.appIndexJs
    ],resolve: {
        modules: [
            'node_modules',paths.appNodeModules,paths.appSrc,paths.appResources
        ],extensions: [
            '.web.js','.mjs','.js','.json','.web.jsx','.jsx','tsx','ts'
        ]
    }
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）