前言

webpack 使用 hot reload 技術時，通常都需要 webpack-dev-server 或是 webpack-hot-middleware 來搭配 express 或是 koa，才能使用 hot reload 的功能。

而這其實對 large scale 的 projects 並不公平，因為 serve large scale projects 的 website，通常都使用自己的方式來 serve 整個 website，如 nginx, apache。

如果要用 webpack-dev-server 來搭配這個 large scale solution 實在是很麻煩，也就因為這樣，才會誕生了 webpack-hot-socketio。

但為了啟用 hot reload 的效果，我們還是得啟用一個 socket.io server，詳細可看 https://github.com/gcaaa31928/webpack-hot-socketio 中的 example

技術內幕

其實也沒什麼內幕，只是把 webpack-hot-middleware 拿出來改一改，原本 webpack-hot-middleware 是用 server-sent 來達到從伺服器端發送事件的效果，詳細可看 https://developer.mozilla.org/zh-TW/docs/Web/API/Server-sent_events/Using_server-sent_events
而 webpack-hot-socketio 則是利用 socket.io 來做伺服器端發送的效果，過程當中遇到許多問題，例如當 socket.io server 重啟時會導致送出多餘的 hot update.json，而讓網頁以為自己沒有更新到 hot update 的 hash 而遞迴崩潰，這時候就非常需要看懂 hot module 的 code 了 QQ。

注意事項

由於 host 的位置一定與 socket.io server 的 host 或是 port，不同，所以有極大的可能性會遇到 cors 問題，此時就需要你們將你們自己的 server 開 allow headers

雜記

要懂 webpack compile 真的不容易，從 tapable 到各種 hook 才能好好地將 plugin 接入，且通常這種 webpack plugin 需要很常的調查時間才能確保沒有任何問題

結論

如果你們的專案處於一個很尷尬的情況，如先前所說，是一個極大的 websites，無法輕易的使用 webpack-hot-middleware 或是 webpack-dev-server 來讓 websites 運作，那或許 webpack-hot-socketio 是你的救贖 QQ