後付けで webpack の HMR を導入する

ここ 10 年くらいは create-* でアプリを作り始めるとだいたい webpack の Hot Module Replacement が降ってくるようになっているが、古いプロジェクトをがんばって webpack 対応したという場合はそんなものは自分で設定しないといけない。

HMR の導入作業はだいたいがそんな経緯で作業するものなので検索するとモダンではなさそうだな、という感じの環境に頑張って導入する記事がいろいろ出てくる。モダンじゃない環境で作業している人の記事はどことなく慎重で信頼できることが多い気がするのだけれどもこれは年齢のせいなんでしょうか。

参考になります(ありがとうございます)

• Docker 環境から webpack-dev-server に繋いで HMR する - BASE プロダクトチームブログ
• Rails+React 環境下における、Hot Module Replacement の導入 - stmn tech blog

実装

自分の場合はこんな設定で動作させられるようになった。設定のドキュメントは頭から読んでも読み切れるくらいの分量だった。

• DevServer | webpack

devServer: {
  hot: true,
  port: 8001,
  static: {
    directory: path.join(__dirname, "public"),
    // https://webpack.js.org/configuration/dev-server/#watch
    watch: false,
  },
  watchFiles: path.join(__dirname, "src"),
  client: {
    overlay: true,
    logging: "info",
  },
  allowedHosts: "all",
  headers: {
    "Access-Control-Allow-Origin": "*",
  },
}

設定のメモ

このあたりは実際の挙動をみないとわかりにくかった。

watchFiles と static.watch

このように設定した。

• static.watch は <rootPath>/public
• watchFiles は <rootPath>/src

src 配下のファイルが変更されたらビルドされて public 配下に置かれる。という構成になっていたため src 配下を変更したら玉突き的に 2 回更新が走るようになってしまった。

1. src 配下を変更したら更新
2. public にファイルが置かれて更新

static.watch が変更を検知した場合、HMR ではなく page reload が走るようになっているとのこと

Tell dev-server to watch the files served by the static.directory option. It is enabled by default, and file changes will trigger a full page reload. This can be disabled by setting the watch option to false.

なので、この玉突き的な更新を防ぐために static.watch=false とした。

allowedHosts

CORS 関連の設定にみえるけどなんで js ファイルをサーブする側に書くのかなと思っていた設定がこれ。

Django でいう ALLOWED_HOSTS だった。

Mimicking Django's ALLOWED_HOSTS, a value beginning with . can be used as a subdomain wildcard. .host.com will match host.com, www.host.com, and any other subdomain of host.com.

ファーストパーティドメイン(ブラウザのアドレスバーに表示されているドメイン)を絞るための設定で、マシン内で開発する用途なら all とかにしておけばよさそう。