こちらが最新の記事です！！
2024/5/4追記
viteを使ったほうが本記事の内容はすぐに達成できます。こちらをご参照ください。
以下、元記事の本文
久々に超簡単アプリをフレームワーク無しで作ろうかな～と思った際にwebpackを組むのがめんどくさいなと思いました。
昔組んだwebpack 4のものはあったんですが、今やwebpackも5だし、なんならwebpackもそろそろ終わりかなと思い…。(参考)
そんな折、別方法を探していてreloadというものを発見しました。
npmモジュールであり、使い方も非常に単純そうだったため試しに使ってみた体験談です。
構成
パッケージマネージャはyarnです。
src以下にアプリ用ソースコードは配置しています。
src以下は最終的ないろいろ検証で複数ファイルが置いてありますが、ひとまずindex.htmlだけでもいいです。
インストール
今回はローカルインストールをします。
yarn add reload -D
これだけ。
HTMLの準備
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>test!!</div>
</body>
</html>
ひとまずこれだけ。
うまくいけば「test!!」とだけ表示されるはずです。
起動
まずは失敗例
yarn reload -b
とREADMEに則ってコマンドを打ったのですが、デフォルトではカレントディレクトリのindex.htmlを探すようで、勝手にsrcとディレクトリを切っていた私の構成では当然何も表示されませんでした。そりゃそうだ。
成功例
というわけでREADMEをもっと読んだところ、ちゃんとオプションがありました。
-d, --dir [dir] The directory to serve up. Defaults to current dir.
-dオプションで起動時のページを指定できるそうです。
※ちなみに-bはブラウザを自動で起動させますよとのこと。
yarn reload -b -d src
これでlocalhost:8080でちゃんと「test!!」と表示されました。
index.htmlを編集したらちゃんとすぐリロードされて反映されます。
jsファイルもちゃんとwatchしてるのか？
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>test!!</div>
<button id="test-btn">ボタン</button>
<a href="./page2.html">ページ２</a>
<script src="./index.js"></script>
</body>
</html>
const btn = document.getElementById("test-btn");
btn.addEventListener("click", () => console.log("hello"));
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>page 2</div>
</body>
</html>
上記のようにjsファイルと、さらに2ページ目も追加してみました。
変更を加えるとちゃんとリロードされます。えらい！
今回はやってないですがcssも対象のようです。
ちなみにwatch場所の指定ができるオプションはあります。
-w, --watch-dir [watch-dir] The directory to watch. Defaults the serving directory.
node_modulesがwatchされていたら大変だなと思っていたのですが、ちゃんとserving directoryになるとのこと。
終わりに
超簡単でしたね。
ちょろいウェブアプリ組むのにwebpackは面倒だしいろいろバンドラ追加したりで重くなるくらいなら、とりあえずHot reloadだけでもあれば最低限いいかって人向け。
にしてもググラビリティが悪い…