ハードリフレッシュまでウェブページが更新されません

私のウェブサイトでは、webpackによって生成されたファイルをフラスコサーバーに提供しています。残念ながら、ファイルを更新すると、ブラウザのキャッシュによってハード・リフレッシュ（Ctrl-F5）までWebページが更新されないことがよくあります。ほとんどのユーザーがハードリフレッシュについて知りませんので、定期的な更新後にWebページを更新したいと思います。開発中には、webpack-dev-serverなどのハードリフレッシュを回避する方法があります。本番環境でこれを行う最も簡単な方法は何ですか？ハードリフレッシュまでウェブページが更新されません

私は、次のwebpack.config.jsファイルがあります。

var webpack = require('webpack'); 
var path = require('path'); 

module.exports = { 
    entry: ['react-hot-loader/patch', './js/main.js'], 
    output: { 
     filename: "./static/bundle.js", 
    }, 
    resolveLoader: { 
    moduleExtensions: ['-loader'] 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /(node_modules|bower_components)/, 
       loaders: 'babel', 
       query: { 
        presets: ['react', 'es2015', 'stage-0'] 
       } 
      }, 
      { 
       test: /\.css$/, 
       loader: 'style-loader', 
      }, 
      { 
       test: /\.css$/, 
       loader: 'css-loader', 
       query: { 
        modules: true, 
        localIdentName: '[name]__[local]___[hash:base64:5]' 
       } 
      } 
     ] 
    } 
};

フラスコサーバは次のようになりますindex.htmlファイルサービスを提供している：

<html> 
<body> 
    <div id="app"></div> 
    <script src="bundle.js"></script> 
</body> 
</html>

出典

2017-10-29 Alex

キャッシュを自分でバストする必要があります。 Webpackにはそのための規定があります。

output: { 
    filename: "./static/bundle-[hash:6].js", 
},

生成されたバンドルファイルは、次のようになります。今bundle-1e3dab.js

、HTMLに：何かが変更されます場合

今

<html> 
<body> 
    <div id="app"></div> 
    <script src="bundle-1e3dab.js"></script> 
</body> 
</html>

ビルドするたびに、ハッシュが更新されます。

注：は、HTML内のファイル・パスを使用すると、自動的にHTMLファイルを更新し置き換えるタスクを持っているあなたのビルドを構築したり、カスタマイズするたびに更新することを忘れないでください。これにはWebpack Manifest Pluginを使用できます。

UPDATE

変更entryあなたのWebPACKファイル内：

// Entry, files to be bundled separately 
    entry: { 
    'main': [ 
     'react-hot-loader/patch', 
     './js/main.js' 
    ] 
    },

およびコンフィギュレーション内のハッシュ

var fs = require('fs'); 
var path = require('path'); 
var basePath = path.join(__dirname, '/'); 

function replace (statsData, fileName, readFilePath, regex, assetChunkName, writeFilePath, replaceWith) { 

    // Read the data so that hash can be read 
    let stats = statsData.toJson(); 

    if (!stats.errors.length) { 
    // read the file i.e. index.html and store the contents 
    let contents = fs.readFileSync(path.join(readFilePath, fileName), 'utf8'), 
     // Replace the pattern with the user-defined replacedWith variable or the chunkHash webpack provides 
     htmlOutput = contents.replace(
     regex, 
     replaceWith || stats.assetsByChunkName[assetChunkName][0] 
    ); 

    // Write back the modified contents into the file 
    fs.writeFileSync(path.join(writeFilePath, fileName), htmlOutput); 
    } 
}

を更新するため、moduleキーの後に、次の内容を追加しますコード：

plugins: [ 
    function() { 
    // To be executed when build is done 
    this.plugin('done', (statsData) => { 
     // `statsData` has the info regarding the file bundling(hash) 

     // Replace the filename with the update chunkHash for build/prod only 
     replace(
     statsData, 
     'index.html', // filename which needs to be modified 
     path.join(basePath, '/dist/'), // path from where to read index.html 
     /bundle\.js/i, // regex i.e. which needs to be replaced 
     'bundle', 
     path.join(basePath, '/dist/')) // path from where to write index.html, can be same if needs ot override 
    }) 
    } 
]

パス名を元に戻し、あなたは

は、あなたが任意のエラーに直面した場合、私に知らせ:)完了です。

出典

2017-10-29 16:19:48 softvar

こんにちはsoftvar、それは私が試したことの一つでした。私は、manifestプラグインによって生成されたJSONファイルをindex.htmlファイルに読み込む方法を見つけ出すことができませんでした。あなたはそのことを知っているか、そのための例がありますか？ありがとう。 – Alex

index.htmlファイルのbundle.jsを更新するために必要なコードでコードを更新しました – softvar

これはWebPACKのについての質問ではありませんが、サーバーはありませんがありますブラウザが強制的にキャッシュを使用しないようにする方法。何をすることができますあなたのURLにbundle.jsの代わりにbundle.js<it's md5>のようなポストフィックスを追加しています。この場合、URLが異なるため、ブラウザは新しいURLとしてURLを扱います。

出典

2017-10-29 16:02:43 Sraw

ハードリフレッシュまでウェブページが更新されません

答えて

関連する問題