問題タブ [webpack-dev-middleware]

yarn ワークスペースを使用して、モノリス webpack/koa プロジェクトを複数のパッケージに分割しました。「web」と呼ぶパッケージが 1 つあります。これは webpack ビルドです。次に、「サーバー」と呼ばれる別のものがあります。これは、webpack アーティファクトと API の両方を提供する koa です。

私が抱えている問題は、webpack ビルドが実行時にサーバー パッケージからの依存関係を解決しているように見えるため、失敗することです。

Web プロジェクトから webpack コンパイラを公開して、サーバー プロジェクトの dev で使用できるようにします。

そして、これをミドルウェアとして Koa に貼り付けます。

ここでは koa-webpack を使用していますが、'webpack-dev-middleware' と 'webpack-hot-client' を独自のラッピングで手動で使用しようとしましたが、まったく同じ動作が得られます。

私が得るのは次のようなものです：

など。サーバー プロジェクトに dep を追加してこれらを埋めようとしましたが、掘り下げる必要のない深いうさぎの穴ですよね?

Web ビルドと Express/koa サーバー ノード パッケージを分離して webpack-dev-middleware を使用する正しい方法は何ですか?

サーバー プロジェクトで ES6 モジュールを使用しています--experimental-modulesが、それが原因でしょうか?

私はJavaScriptが初めてです。JavaScript を学習するために、GitHub ( https://github.com/wbkd/webpack-starter )から webpack-starter プロジェクトを複製しました。次に、npm installデスクトップの clone フォルダーで a を実行し、Git Bash コンソールにメッセージが表示されたらnpm audit fixaを実行しました。found 1 low severity vulnerabilityそしたら、こんなメッセージを見て、npm WARN webpack-dev-middleware@3.7.2 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.

上記の警告を調査する前にnpm start、プロジェクト フォルダーから PowerShell を実行しました。エラー メッセージは表示されませんでしたが、ブラウザ (Chrome) が起動しませんでした。

次に、npm WARNメッセージを調査したところ、 https://stackoverflow.com/a/64733624/9698039 が見つかりました。これにより、https://github.com/webpack/webpack-dev-server/issues/2807#にたどり着きましたissuecomment-734982609、これにより、webpack のバージョンを ^5.10.0 から "webpack": "^4.0.0" にダウングレードする決定に至りました。

ダウングレードする前は、ここに私のpackage.jsonがありました:

そして、ここに私のwebpack.config.dev.jsがありました:

webpack をダウングレードするために、package.json をに変更"webpack": "^5.10.0"し、Git Bash から再度実行しました。"webpack": "^4.0.0"npm install

次に、npm startPowerShell からもう一度実行しましたが、エラー メッセージは表示されず、Compiled successfullyメッセージは表示されますが、もう一度ブラウザーが起動しません。webpack ピアの依存関係の問題は、ブラウザーが起動しない問題とは無関係であるように見えますが、私は JavaScript を初めて使用するため、現在 100% の自信を持ってその主張を行うことはできません。

単一ページのアプリを構築しようとしていますが、ユーザーがサインインするまでアプリ全体をダウンロードする必要がないように、サインイン スクリプトを個別に保持したいと考えています。また、更新したいと考えています。ブラウザがパスワードを適切に検出して保存できるように、ログイン時のページ。すべてのファイルを含むdist/フォルダーが作成されるため、これを本番環境で正常に機能させることができますが、開発環境での設定に問題があります。signin.html ビューが見つからないというエラーが表示されます。私は webpack-dev-middleware を使用しており、serverSideRender を true に、index を false に設定しました。

次に、2 つの HtmlWebpackPlugin を使用して、サインインとメイン アプリ用のページを作成し、各ページの特定のチャンクを読み込むように設定します。

次に、開発用の webpack 構成があります。

サーバーを起動すると、ビュー HTML が見つからないことが示されます。

「index:false」行を削除すると、メインのアプリ コードが読み込まれますが、どのページに移動しても常に index.html が読み込まれます。これは、API ページを常にレンダリングするため、API ページを持つ能力を損なうようです。メインアプリ。

開発ミドルウェアを使用して、異なるチャンクまたはバンドルで異なるページを提供するにはどうすればよいですか? サーバー側のレンダリングが必要であることは確かですが、それに関するドキュメントはあまり多くありません。ファイルはすべてフォルダーではなくメモリに保存されるため、どのように参照しますres.render()か?