web-dev-qa-db-ja.com

Webpackでキャッシュバスティングサフィックスを使用する方法はありますか

Webpackの前は、「キャッシュ無効化」のために次のパターンに常に依存していました。

<script src="foo.js?cacheBust=12345" />

12345は、すべてのビルドでサーバーが生成したトークンでした（Gitハッシュである場合がありますが、私の場合はそうではありません）。

Webpackでは、build.jsとchunk.1.jsの2つのファイルがあります。最初のタグを通常のスクリプトタグで取り込むため、上記のパターンを使用できます。

<script src="build.js?cacheBust=12345" />

ただし、その時点でbuild.jsはchunk.1.jsを取得し、取得しますが、実行するとキャッシュ無効化サフィックスは含まれません。

Webpackに?cacheBust=12345を自動的に追加したいのですが、ビルド時に12345の部分がわからないため、webpack.configに含めることができません。代わりに、HTMLページが評価されるまで待機する必要があり、その時点でサーバーからトークンを取得します。

だから、私の質問は、Webpackが初期ファイルをフェッチするために使用されるパラメータ（たとえば?cacheBust=12345）を見て、他のファイルをフェッチするときに同じパラメータを追加する方法はありますか？

javascriptwebpackbrowser-cache
20
machineghost

単にこれを行うことができます

output: {
    filename: '[name].js?t=' + new Date().getTime(),
    chunkFilename: '[name]-chunk.js?t=' + new Date().getTime(),
    publicPath: './',
    path: path.resolve(__dirname, 'deploymentPackage')
}
12
VizardCrawler

「webpack way」でキャッシュ無効化を実現する場合：

1.出力ファイルのハッシュ名

生成された名前をハッシュするために出力ファイル名を変更する（ビルド段階）

output: {
    path: '/',
    filename: '[hash].js',
    chunkFilename: '[chunkhash].js',
},

その時点から、foo.jsとchunk.1.jsはe883ce503b831d4dde09.jsとf900ab84da3ad9bd39cc.jsのように呼び出されます。このファイルの生成は、多くの場合、生産と時間の更新に関連するcacheBust値に言及する価値があります。

2.未知のファイル名を含める方法

今からあなたのfoo.js-メインファイルは知られていない方法で命名されています。このファイル名を抽出するには、 AssetsPlugin を使用できます

const AssetsPlugin = require('assets-webpack-plugin');
const assetsPluginInstance = new AssetsPlugin();

このプラグインをwebpack.config.jsに追加します

plugins: [
    assetsPluginInstance
]

webpack-assets.jsonファイルには、次のようなものが表示されるはずです。

{
    "main": {
        "js": "/e883ce503b831d4dde09.js"
    }
}

このファイルを使用して、メインの.jsファイルを指すことができます。詳細については、 この回答 を参照してください

3.福利厚生

chunk.2.jsファイルの変更のためにアプリの制作を行う場合、ファイルパスを

- build.js?cacheBust=12345
- chunk.1.js?cacheBust=12345
- chunk.2.js?cacheBust=12345
- chunk.2.js?cacheBust=12345

新しいものへ

- build.js?cacheBust=12346   // modified referation to chunk.2.js file
- chunk.1.js?cacheBust=12346
- chunk.2.js?cacheBust=12346 // modified
- chunk.2.js?cacheBust=12346

上記のソリューションを使用すると、無料のキャッシュ決定が得られます。これで、fillesは次のように呼び出されます

（以前の生産）

- e883ce503b831d4dde09.js
- f900ab84da3ad9bd39cc.js
- 5015cc82c7831915903f.js
- 8b6de52a46dd942a63a7.js

（新規生産）

- c56322911935a8c9af13.js // modified referation to chunk.2.js file
- f900ab84da3ad9bd39cc.js
- cd2229826373edd7f3bc.js // modified
- 8b6de52a46dd942a63a7.js

今onlymain fileおよびchunk.2.jsの名前が変更され、webpackの方法を使用してこれを無料で取得できます。

長期キャッシュの詳細については、こちらをご覧ください https://medium.com/webpack/predictable-long-term-caching-with-webpack-d3eee1d3fa31

36
Everettss

使用できますHtmlWebpackPlugin

webpack.js.org/plugins/html-webpack-plugin の説明：

...プラグインは、Webpackバンドルを提供するHTMLファイルの作成を簡素化します。これは、すべてのコンパイルを変更するファイル名にハッシュを含む（= ---- ==）Webpackバンドルに特に便利です...

私の一部webpack.config.js：

// ...
const HtmlWebpackPlugin = require('html-webpack-plugin');
// ...
module.exports = {
   // ...
   plugins: [
      new HtmlWebpackPlugin({
         template: './assets/index.html',
         hash: true,
      }),
      // ...
   ]
};

hash: trueその後、含まれるすべてのスクリプトとCSSファイルに一意のwebpackコンパイルハッシュを追加します。これは、キャッシュの無効化に役立ちます。

HtmlWebpackPluginの詳細optionson github.com/jantimon/html-webpack-plugin

このオプションのおかげで、出力htmlファイルが得られました：

<!DOCTYPE html>
<html>
   <head>
      <!-- ... rest of my head code ... -->
      <link href="./css/styles.css?f42fdf96e2f7f678f9da" rel="stylesheet">
   </head>
   <body>
      <!-- ... rest of my body code ... -->
      <script type="text/javascript" src="./js/index.bundle.js?f42fdf96e2f7f678f9da"></script>
   </body>
</html>

私のプロジェクトのソースコード： github.com/cichy380/html-starter-bs4-webpack

4
Cichy