Webpackの使用は増えているが…
最近はgruntやgulpではなくWebpackを使用するWebサイトが増えている。
例えばVue.jsで環境を構築したい場合はvue init webpack-simple sampleを実行するだけで基本的な環境構築が完了する。※
※正確にはvue init終了後にcd sample && npm i && npm run devが必要。
しかし、このまま利用した場合、外部CSSやJavaScriptでファイルを読み込んでいる場合は古いキャッシュを読み込んでしまい、修正内容が反映しない問題が発生する。
html-webpack-pluginをインストール
html-webpack-pluginをインストールすればHTML内のbuild.jsをnpm run build実行時にbuild.js?e9542a9296a47f1c0891のようにハッシュを自動で付けられるのでキャッシュの問題を解決できる。
やり方はまずhtml-webpack-pluginをインストール。
npm i -D html-webpack-plugin
そのあとwebpack.config.jsに以下の記述する。
// vue init webpack-simpleで環境構築されている場合の設定変更例
// 一番上の行あたりに記述
const HtmlWebpackPlugin = require('html-webpack-plugin')
/* 中略 */
// outputのpublicPathを'/'にしてfilenameに[hash]を付ける
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/',
filename: 'build.js?[hash]'
},
/* 中略 */
// devtool:の下あたりに記述
plugins: [
new HtmlWebpackPlugin({
template: "./index.html"
})
]
scriptタグはbuild時に追加されるのでindex.html内のscriptタグは削除して良い。
以上、の設定だけでjsファイルなどがbuild時にbuild.js?e9542a9296a47f1c0891のようにハッシュ付きになるためキャッシュの影響を受けなくなる。※
※前回のbuild時との差分がなければ[hash]は変わらない。
短いハッシュのshorthashを作成
[hash]は20文字あるため長過ぎると感じる人もいるだろう。その場合はshorthash変数を作成してハッシュを5文字程度に短くする方法もある。
shorthash変数で作成したものはbuild時に差分がなくても毎回shorthashが生成される。
差分があるときのみハッシュを変更する場合はhtml-webpack-short-hash-pluginをインストールして使用する。
// 一番上の行あたりに記述
const shorthash = Math.random().toString(36).slice(-5)
/* 中略 */
// filenameを変更
filename: `build.js?${shorthash}`
