轉眼入行已五年有餘，如今已經成長爲一個全乾程序員。回想起當初使用的一些工具以及工作流，感覺真是笨拙而粗暴，特別是對於瀏覽器刷新這事兒，只會猛擊 F5，不禁感慨那飽經摧殘的 F5 鍵真是堅挺異常，竟沒有提前掛掉。
隨着踩的坑越來越多，也日漸積累了不少經驗，這其中就包括各種自動刷新的辦法。因爲近幾年來大部分時假在與 Laravel 打交道，使用 laravel-mix 已成家常便飯，所以想着總結並分享一下 laravel-mix 工作流中的自動刷新之道。
laravel-mix 自稱 An elegant wrapper around Webpack for the 80% use case，其功能確實強大，它對於前端開發工作流的考慮也是非常全面，可以通過 Browsersync、Hot Module Replacement 和 LiveReload 實現自動刷新。
在接下來的內容之前，需要說明一下我平時使用的環境。
系統爲 windows10，前端資源編譯調試都在宿主機（即 windows10）中完成，而 php, mysql 等由 laradock 容器提供。我還爲此創建了一個演示項目，文中的幾個錄屏動畫也來自該項目，有興趣的可自行克隆查看源碼。
Browsersync
Browsersync 是一款強大的前端調試工具，如它的名字一樣，主要的功能就是“瀏覽器同步”，這裏的同步不僅是當資源發生變化時同步刷新，它支持局域網中多終端設備同時調試，甚至能同步這些設備上的滾動、點擊等操作。此外它還擔任了一個易於使用的 UI 界面（頁面）以及一些插件，具體信息可前往官網查看。
- 安裝依賴
yarn add -D browser-sync browser-sync-webpack-plugin- 在
webpack.mix.js文件中調用mix.browserSync()啓動 Browsersync
/**
*下面方法啓用 bs，不傳參則使用 laravel-mix 的默認配置
* 根據實際使用環境配置參數以獲得更好體驗
* bs 配置選項參考 https://www.browsersync.io/docs/options
*/
mix.browserSync({
proxy: 'laravel-mix-autoreload-demo.test/',
startPath: '/demo-bs',
open: true,
reloadOnRestart: true,
watchOptions: {
usePolling: true,
},
})- 運行
yarn run watch-poll
如果 Browsersync 的 open 選項設置的爲 true，在首次編譯完成之後瀏覽器會自動打開一個頁面，否則需要手動打開，默認的是 http://localhost:3000，具體依所設置的 Browsersync 參數而定。
- 修改相關文件關保存，webpack 將會自動編譯修改的文件，完成之後頁面將自動刷新。（如果修改的是後端文件，則直接刷新）
Hot Module Replacement(hmr)
相信熟悉 webpack 的前端er 都知道 hmr 是什麼。有別於一般的刷新（即整頁相關資源重新加載），它可以只對發生變化的部分模塊進行熱替換，而其它部分保持不變。這使得它不僅反應及時，通常也能保持當前應用狀態不會被刷新，這對於調試 SPA 項目十分方便。當然,並不是所有修改它都能進行熱替換，有時也會整頁刷新。
要在 laravel-mix 中使用 hmr，不需要安裝其它額外的依賴包。
- 在
webpack.mix.js中根據實際場景配置 hmr 參數
// 配置 hmr 參數
mix.options({
hmrOptions: {
host: 'laravel-mix-autoreload-demo.test',
port: 8080,
}
})- 執行
yarn run hot
首次編輯完成之後，打開對應的頁面，例如本文提到的示例項目打開 http://laravel-mix-autoreload-demo.test/demo-hmr
- 修改前端資源文件，愉快擼碼
LiveReload
LiveReload 算是一個比較老（維護更新也不勤）的工具了，關於它的詳細介紹請訪問官網。
- 安裝依賴
// laravel-mix v4
yarn add -D webpack-livereload-plugin
// laravel-mix v3 或更早
yarn add -D webpack-livereload-plugin@1- 在模板的 body 最後加上額外引用的 js
@if(config('app.env') == 'local')
<script src="http://localhost:35729/livereload.js"></script>
@endif也可以選擇安裝瀏覽器插件替代
- 執行
yarn run watch-poll
執行該命令以監聽文件變化並讓 webpack 自動重新編譯。
- 打開頁面，修改頁面引用的前端資源（如 js,css）並保存，頁面將自動刷新
因爲使用 laravel-mix 編譯，一般修改 resource/ 目錄下的文件，但實際上直接修改 public/ 目錄中的文件也是可以觸發刷新的。
| Browsersync | Hot Module Replacement | LiveReload | |
|---|---|---|---|
| 刷新方式 | 修改 css 文件時爲部分替換，其它整頁刷新 | 模塊熱替換或整頁刷新 | 整頁刷新 |
| 監聽範圍 | 在配置項 files 規則所包含的前後端文件 | 前端模塊（即 webpack 加載的模塊） | 瀏覽器當前頁面所加載的前端文件 |
| 速度 | 修改 css 時較快，其它文件時一般 | 快，特別是熱替換時 | 一般 |
| 可靠性 | 可靠 | 存在 Bug，但有特殊處理辦法 | 可靠 |
| 使用複雜度 | 簡單，僅需安裝依賴並調用 mix.browserSync() 方法 | 較複雜，可能需要針對目前存在的 Bug 作特殊處理 | 較複雜，需要安裝依賴，並在入口模板中手動添加額外 js 引用（或使用瀏覽器插件） |
| 主要優勢 | 功能強大，配置靈活，可同時響應前後端文件變化，適合絕大部分場景 | 熱替換幾乎實現實時預覽且不響應應用狀態，適合 SPA 項目 | 相對於其它兩個似乎沒特別優勢（至少目前本人未發現 ） |
個人日常使用習慣
因爲 Browsersync 的可靠性與廣泛適用性，它通常是我開發時使用的主力工具（甚至我爲 hexo 與安裝的 Browsersync 插件）。
而 hmr 我通常只在調試 SPA 項目時使用，因爲它響應速度快，而且通常不會影響應用狀態，十分方便。但同時需要注意的是 laravel-mix 環境下使用 hmr 也存在一些問題（當前最新版本 4.0.15 中仍存在），例如與 mix.extract()沒法同時使用(見 Issue) 以及在windows 環境中存在的路徑分隔符問題見 Issue，好在這幾個 Issue 裏也給出了這些問題的解決辦法，雖然不甚優雅，但至少行得通。（在前面提到的示例項目裏有相關的代碼及註釋，可自行查閱）
至於 LiveReload，我完全不會在日常開發中使用。因爲相較於其它兩個，它幾乎沒有什麼優勢可言，而且維護情況也堪憂。
總結
前端開發花樣百出，各種技術、框架以及工具層出不窮。作爲一個程序員，當然不得不學習這些，畢竟生命在於折騰，而前端開發尤其如此。慶幸的是有些折騰也是值得的，它能解救我們（或者解救我們的 F5 鍵 ），例如當你掌握了各種各樣的自動刷新方法（包括但不限於本文提及的），你會發現自己臨幸 F5 鍵的頻率會越來越低，不知不覺省下來不少時間，可以用來睡覺、逛街、吃雞或者有娃的帶娃……
博客原文