問題タブ [webpack-dev-middleware]

webpack-hot-middlewareNode.js サーバーでとwebpack-dev-middlewareライブラリの両方を使用して、Webpack ホット リロードを利用できる TypeScript で記述されたプロジェクトがあります。

また、パブリック ディレクトリに 1 つの CSS ファイルを生成する Stylus コード (Gulp を使用したインクリメンタル ビルド) 用に構成されたすべてのビルド手順が既にあります。

したがって、TypeScript のものには既に Webpack のホット リロードがあるので、CSS にも Webpack のホット リロードを利用したいと思いますが、CSS ファイルをビルドしたくありません。理想的には、単一の CSS ファイルが変更されるたびに Webpack がホット リロードするようにしたいだけです。それを達成するための最も簡単で最良の方法は何ですか？

現在の構成ファイルは次のようになります。

そして、Webpack Hot Middleware と Webpack Dev Middleware を次のように使用します。

私は独自の redux スターター キットを作成しようとしていて、少しリファクタリングしていますが、どういうわけか私の bundle.js (および style.css) が によってページに正しく提供されませんwebpack-dev-middleware。解決策が見つからないことに悩まされているので、ここで助けを求めています:)

この問題に関係する 4 つの主なファイルは次のとおりです。

/src/server.js

/src/serverConfig.js

/webpack.config.client.js

最後になりましたが、これが私が提供するために使用している package.json スクリプトです。 "serve": "babel-node ./src/server.js"

tl;drwebpack-dev-middlewareがバンドルを誤って提供する

誰が何が問題なのか知っていますか？

ありがとう、ジョリー

私は現在、ビルド結果用のカスタムプリンターで基本的な Webpack APIを使用しています。

今、私は使用に切り替えたいと思ってwebpack-dev-middlewareいますが、統計プリンターは保持しています。おそらくこれが機能すると思います：

ただし、最初のコンパイルのみが出力され、後続のコンパイルは実行されても無視されます。これを行う正しい方法は何ですか？

webpack-dev-middlewareの readme から、次の構成がありpublicPathます。

しかし、すでに同じ構成があるため、なぜそのような構成があるのか​​ わかりませんwebpack.config.js

私は、Apollo-Client と GraphQL を利用する React ボイラープレートに取り組んできました。webpack-dev-middlewareアプリケーションを実際にレンダリングするポート 3000 で Express サーバーを実行する 1 つのノード プロセスと、JavaScript バンドルのパッケージ化と提供に使用するポート 3001 で別の Express サーバーを実行するように、私のアプリは設定されています。

http://localhost:3001/static/jsではなくhttp://localhost:3000/static/js/bundle.js<script src="/static/js/bundle.js />でバンドルをリクエストしようとしていたため、を使用してバンドルをロードしようとすると 404 が返されました。 /bundle.js 。実際には によって提供されていました。webpack-dev-middleware

先頭にhttp://localhost:3001を追加しなくてwebpack-dev-middlewareも、アプリが JS バンドルにアクセスできるようにアプリ サーバーを構成する方法はありますか?/static/js/bundle.js

何らかの理由で、変更時にファイルを再構築するために webpack を取得できません。私は基本的にBrowsersync - Webpack + TypeScript Recipeに従いました。

私のwebpack.config.js：

server.js文字通りレシピからコピーしたbrowser-sync 設定 ( ):

そして、すべてを開始するには、npmスクリプトセクションを使用するだけです:

typescript ファイルを変更するたびに、app/何も起こりません。ここで何が間違っていますか？

Express js と angular 2 を実行するアプリがあります。webpack を使用してモジュールをバンドルし、webpack dev ミドルウェアを使用して、express で webpack を実行しています。

index.html ファイルを提供するワイルドカード ルートを持つように Express js をセットアップしましたが、localhost:8080/login にアクセスしようとすると、webpack-html-plugin は js および css アセットをまったく追加しません。

localhost:8080 (ホームページ) にアクセスすると、アセットが正しく追加されます。パブリック パスを /login/ に変更すると、ログイン ルートは機能しますが、ホームページは機能しないため、これはパブリック パスによって処理されると推測できます。

アセットを他のルートに提供する方法はありますか?

Webpack + Angular2 の間違った publicPathに非常に似ていますか?

私のレポは公開されているので、よろしければご覧ください。