reactjsとwebpackを使用して開発されたWebアプリケーションのキャッシュ問題

私はreactjsとwebpackを使用して開発されたWebアプリケーションで作業しています。デプロイメントが完了するたびに、ブラウザのキャッシュをクリアしてブラウザを再起動するようにユーザーに依頼する必要があります。私は、javascriptバンドルファイルとCSSファイルの両方がユーザーのブラウザにキャッシュされていると思います。reactjsとwebpackを使用して開発されたWebアプリケーションのキャッシュ問題

ブラウザに強制的にこれらのファイルをキャッシュしないようにするか、サーバーから最新のファイルをダウンロードさせることができます。

<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>My App</title> 
      <link rel="stylesheet" href="styles.css" media="screen" charset="utf-8"> 
    </head> 
    <body> 
    <div id="app"></div> 
    <script src="bundle.js"></script> 
    </body> 
</html>

出典

2016-04-07 OpenStack

あなたはhtml-webpack-plugin

plugins: [ 
    new HtmlWebpackPlugin({ 
     hash: true 
    }) 
]

ハッシュを使用することができます真| trueの場合はfalseを返し、含まれているすべてのスクリプトとCSSファイルに一意のWebpackコンパイルハッシュを追加します。これはキャッシュ無効化に役立ちます。

出典

2016-04-07 16:07:54 Jack

すぐにお返事ありがとうございます。ファイル 'bundle.js？1c03629db68f03ac936e'に対して、サーバーが404（Not found）のステータスで応答しましたが、' styles.css？1c03629db68f03ac936e'ファイルには同様のエラーが発生しています。私はnpmパッケージをインストールし、webapck設定ファイルにあなたが示したコードを単純に追加しました。ビルドとデプロイ後にエラーが発生しています。アプリケーションをローカルで実行すると、 'ncaught Invariant Violation：_registerComponent（...）：ターゲットコンテナはDOM要素ではありません。 'というエラーが発生します。 – OpenStack

' HtmlWebpackPlugin'から生成されたhtmlファイルが正しく参照していることを確認してください。あなたのプロジェクトがどのように設定されているのかわからないので、配布ディレクトリの構造が異なると思うかもしれません。 – Jack

私は問題は、クエリ文字列が正しい形式ではないと思います。キー値のペアの代わりに、ファイルはちょうど値です。それは 'bundle.js？v = 1c03629db68f03ac936e'の代わりに' bundle.js？1c03629db68f03ac936e'となることを意味しています。 'キー'がありません。私は設定オプションを忘れてしまった。 – OpenStack

任意の余分なものなしでこの問題を回避するための簡単な方法があります。 webpackの組み込みのハッシング機能を使用します。

あなたのバンドルにハッシュを追加する方法について読むことができますhere。これは「長期キャッシング」のタイトルですが、ファイルが変更されない場合にのみ当てはまります。しかしバンドルを再構築すると新しい一意のハッシュ値が得られるので、ブラウザは新しいファイルであると思ってダウンロードします。

出典

2016-04-07 17:17:55 gyzerok

私のwebpack.configファイルで 'filename： '[hash] .bundle.js'、'を使用していると仮定します。これは '3d161aa1fedaca1ca95b.bundle'のようなファイルを生成します。今、 ''のようなbundle.jsファイルを含むindex.htmlファイルを更新するにはどうすればいいですか？この記事では、「あなたのHTMLにそのハッシュを持つエントリーチャンクを参照する必要があることに注意してください。統計からハッシュやファイル名を抽出したいかもしれません。私はここで何かを逃していますか？ – OpenStack

この回答は、最後の章https://webpack.github.io/docs/long-term-caching.html#get-filenames-from-statsで確認できます。ビルド後、stats.jsonを参照して実際のバンドル名を確認し、htmlテンプレートに渡すことができます。 – gyzerok

返信いただきありがとうございます。私は 'assets-webpack-plugin'を見て、'このプラグインは、生成されたアセットのパスを持つjsonファイルを出力するので、他の場所からそれらを見つけることができます。 'と言いますが、 'index.html'で参照ファイル名を更新する方法 – OpenStack

reactjsとwebpackを使用して開発されたWebアプリケーションのキャッシュ問題

答えて

関連する問題