問題タブ [webpack-module-federation]

現在、モジュール フェデレーション プラグインを使用する 2 つの異なるプロジェクトで Vaadin UI Web コンポーネント ライブラリを使用しています。1 つのアプリは、他のアプリのコードに依存します。

両方のプロジェクトに主な@vaadin/vaadin依存関係をインストールしましたが、バンドル サイズが大きいため、ホール パッケージを 1 つのアプリにインポートしたくありません。メインの Vaadin パッケージには、@vaadin/vaadin-text-field.

共有依存関係については、現在@vaadin/vaadin-text-field. しかし、Web コンポーネントを追加したり、1 つのアプリで 1 つの Web コンポーネントだけを使用したりするにはどうすればよいでしょうか。@vaadin/vaadinホールパッケージをインポートせずに、メインプロジェクトを共有依存関係として何らかの方法で使用することは可能ですか?

例：

両方のアプリは、次の共有依存関係を使用しています。

私はこのようにしたいと思います：

import '@vaadin/vaadin-text-field'Webpackの問題なしでインポートします。

webpack モジュールフェデレーションを使用して、大きなモノリス React アプリをマイクロフロントエンドに分割しようとしています。私はすでにリモートモジュールをデプロイしており、開発サーバーをローカルで実行しているときにうまく機能しています。すべてが完全に正常に機能します。しかし、yarn build を実行してコンシューマー アプリをデプロイすると、次のエラーで失敗します。

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

遅延ロードされたリモート モジュールをコメント アウトすると、すべて正常に動作します。

リモートでロードされたモジュールを使用して webpack を正しくビルドする方法を知っている人はいますか?

これは私の消費者コンポーネントです:

これは私の webpack.prod.config.js ファイルです:

Webpack モジュール フェデレーションでは、プロダクションとしてビルドするときに開発ファイル名を保持するにはどうすればよいですか?

現在、それらはすべて のような3279.jsものではなく、 のような数字に変更されていますsrc_applications_myApp_jsx.js。

Webpack 構成の一部:

問題は、chunkFilename. に変更して'vendor/[id].js'も何も変わりません。

Webpack のドキュメントによると、[name]プロパティはチャンクに名前がある場合にのみ機能します。では、なぜ名前が設定されていないのでしょうか。

ModuleFederationPlugin と webpack を使用してマイクロフロントエンドに基づく反応 Web アプリケーションをデプロイしようとしていますが、マイクロフロントエンドの 1 つを分離してデプロイしようとすると、エラーのない白いページが表示されます。

本番環境への私の webpack 構成:

私のwebpackはbabelと共通です:

React-Router を使用した私の App.js コンポーネント:

サーバーにデプロイすると、すべてのステータス リクエストが 200 になり、Chrome コンソールにエラーが表示されません