ReactなどのSPAサービスを作ると割と問題になるリリースしたのにフロントの変更がなかなか反映されない時の対処法

ReactなどのSPAサービスを作ると 割と問題になる リリースしたのにフロントの変更が なかなか反映されない時の対処法

ReactなどのSPAサービスを作ると割と問題になるのが、リリースしたのになかなか反映されない!!ってことが起きます。ハッシュ付きのビルドファイルにすればいい話なんですが、この辺をwebpackでいい感じのやり方があったのでご紹介します。

Ads

今回の問題点

環境

node v8.1.4
npm v5.0.3

使うパッケージ

jantimon/html-webpack-plugin: Simplifies creation of HTML files to serve your webpack bundles

html-webpack-pluginを使ってhash付きのビルドJSファイルを読み込むようにします。

やり方

index.template.ejs

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="icon" href="/assets/img/favicon.ico">
  <link rel="apple-touch-icon-precomposed" href="/assets/img/apple-touch-icon-precomposed.png">
</head>
<body id="body">
<div id="root"></div>
</body>
</html>

webpack.config.js

plugins: [
  new HtmlWebpackPlugin({
    hash: true,
    filename: `./public/index.html',
    template: './src/index.template.ejs',
    inject: 'body',
  }),
],

やり方としてはこんだけです。hash: trueにすることでハッシュ付きのJSファイルを生成してくれるようになります。さらにindex.template.ejsを元に生成されつJSファイルを読み込みができる形でindex.htmlを吐き出してくれます。

例えば以下のようなindex.htmlです。この場合だとJSファイルがハッシュ付きのものになっているのがわかります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="icon" href="/assets/img/favicon.ico">
  <link rel="apple-touch-icon-precomposed" href="/assets/img/apple-touch-icon-precomposed.png">
  <link href="/assets/app.css" rel="stylesheet"></head>
  <body id="body">
  <div id="root"></div>
  <script type="text/javascript" src="/assets/bundle.js?36f7c64399ded5cc5e55"></script></body>
</html>

まとめ

ディレクターに「反映されてないっす」って言われた時はどうしようかと思ったけど、結構簡単にできました。よかったよかった!

いいなと思ったらシェアお願いします

Ads

同じカテゴリーの記事

ページの先頭へ