webpack dev server v2 では静的ファイルもライブリロード可能になってた

ちゃんと webpack を試す前はなんとなく雰囲気で「webpack dev server ってライブリロード機能付きの開発用サーバでしょ」みたいなとても適当な認識でいたのだけど、実際にさわってみると思ってたのとはちょっと違ってて、たとえば webpack.config.js に

module.exports = {
  // build したものは 'public/assets/' 以下に書き出される設定
  devServer: {
    contentBase: path.join(__dirname, 'public'),
    publicPath: '/assets/'
  }
}

という設定を書いたとしても、webpack で管理してるアセットファイルの変更は感知してリロードしてくれるものの、contentBase オプションで指定したディレクトリ以下にある静的ファイル（index.html など）の変更まで感知してリロードしてくれる訳ではなかった。最初のうちは自分のやり方が悪いのかと思ってかなり悩んでたのだが、調べていくとそうではなくて、単にそういうものらしい。

いわゆる SPA の開発用途ならこれで十分なのかもしれないけど、自分みたいにごく普通のウェブページしか制作しないような人間には、さすがにこれだと単体では使いづらい。なので、そういう用途に使うのであれば別途 Browsersync などを使って開発用サーバを立てるしかないかな…と考えてた。

devServer.watchContentBase

だったのだけど、先日 webpack v2 のドキュメントを読んでたところ、devServer の項目に watchContentBase というオプションが入ってるのを見つけた。

Tell the server to watch the files served by the devServer.contentBase option. File changes will trigger a full page reload.

これは v2 から（正確には v2.1.0-beta.9 から）実装された機能のようだ。いちおう v1 にも実装したいという動きはあったようだが「これ以上 v1 系には機能を増やしたくないんや」という理由で却下された模様。

試してみるか

そんな訳で、さっそく手元に作ってあった実験用のサンプル（先日書いたとおり、すでに webpack 2.2 ベースに切り替えてある）に npm install --save-dev webpack-dev-server@beta¹ して試してみた。有効にするには webpack.config.js の先ほどの部分に watchContentBase: true を追記するか、コマンドラインなら --watch-content-base オプションを付けて起動すればいい。

とりあえず簡単に試してみた範囲内では、特に問題もなく普通に動作した。Browsersync のような色々な便利機能はないけど、まあ最低限のライブリロードはやってくれるので、例えば自分が毎年やってる赤れんが Summer Jazz+ の告知ページみたいな HTML ページ 1 枚だけの簡単なウェブ制作用途なら、これだけでも十分対応できそうな気はする。--open 付ければウェブブラウザ開けるようになったのも地味に便利。

余談

こうやってなんでもかんでも webpack のエコシステムに寄せてしまうと、結局ここまで Sprockets に依存してきたのとそんな大差ないというか、またいざという時に簡単に脱出できなくなりそうで、危険な気がしないでもない。