webpack serveのliveReloadでブラウザを自動更新する方法

webpack serveのliveReload
liveReloadを行うための環境設定
liveReloadを有効化の4つのポイント
CSSなどにも対応させる場合

webpack serveのliveReload

webpackでHTMLを修正したらブラウザで表示されている「http://localhost:8080/」を自動的に更新して確認できるようにしたいことがある。

Googleで検索すると色々なやり方を説明しているWebサイトがあるが間違っているものも多い。

liveReloadを行うための環境設定

まず以下のコマンドで適当なディレクトリを作成してwebpackなどをインストールする。

mkdir webpack-server-livereload; cd webpack-server-livereload; npm init -y; npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin; touch index.html; touch webpack.config.js; mkdir src; touch src/index.js

次にwebpack.config.jsを以下のように設定する。

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
  ],
};

index.htmlはこのようにする。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>Hello world!</title>
</head>
<body>
<h1>Hello world!<h1>
</body>
</html>

以上の手順が終わればターミナルでwebpack serve --openを実行すればlocalhost:8080でHTMLのliveReload機能付きのコーディングができるようになる。

webpack serve --open

試しにwebpack serve --open実行後にindex.htmlの「Hello」を「Ohayou」に変えてみよう。

修正して上書き保存するとブラウザが自動的に更新されて「Hello」が「Ohayou」になる。

liveReloadを有効化の4つのポイント

1. npm installで4つインストールしているか

今回の実装にはwebpack, webpack-cli, webpack-dev-server, html-webpack-pluginの4つが必須なので、HTMLのliveReload機能付きのコーディングができない場合はいずれかがインストールされていない可能性がある。

2. webpack.config.jsにdevServerの記載があるか

webpack serveを実行してlocalhost:8080でHTMLのliveReload機能付きのコーディングをするにはdevServerとcontentBaseでHTMLの書き出し先の指定が必要になる。

liveReload: true, を追記する人もいるが、デフォルトがliveReload: true, なので必要ない。

逆にliveReload: false, の指定があると動作しないので注意。

devServer: {
  contentBase: path.join(__dirname, 'dist'),
},

3. webpack serveを実行しているか

liveReloadだからといってwebpack liveReloadでは実行不可。

当然「webpack serbe」などのスペルミスでも動作しない。

軽微のスペルミスだと「serve」の間違えでは？と教えてくれる。

aliasに「server」と「s」が設定されているのでwebpack serverやwebpack sも動作する。

$ webpack serbe
[webpack-cli] Unknown command or entry 'serbe'
[webpack-cli] Did you mean 'serve' (alias 'server, s')?
[webpack-cli] Run 'webpack --help' to see available commands and options