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
)を見て、他のファイルをフェッチするときに同じパラメータを追加する方法はありますか?
単にこれを行うことができます
output: {
filename: '[name].js?t=' + new Date().getTime(),
chunkFilename: '[name]-chunk.js?t=' + new Date().getTime(),
publicPath: './',
path: path.resolve(__dirname, 'deploymentPackage')
}
「webpack
way」でキャッシュ無効化を実現する場合:
生成された名前をハッシュするために出力ファイル名を変更する(ビルド段階)
output: {
path: '/',
filename: '[hash].js',
chunkFilename: '[chunkhash].js',
},
その時点から、foo.js
とchunk.1.js
はe883ce503b831d4dde09.js
とf900ab84da3ad9bd39cc.js
のように呼び出されます。このファイルの生成は、多くの場合、生産と時間の更新に関連するcacheBust
値に言及する価値があります。
今からあなたの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
ファイルを指すことができます。詳細については、 この回答 を参照してください
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
使用できます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