Red Huang

Red Huang

webpack-hot-socketio - 真的只能靠 Server-Sent Events 才能使用 hot reload 嗎?

開門見山,直接貼 repo 位置

前言#

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

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。