webpack-dev-server有熱更新功能,當webpack入口的js文件被修改,則會自動更新數據並刷新瀏覽器。
css 問題
如果使用style-loader將樣式添加到js文件中,在編寫樣式的時候可以享受熱更新的效果,如果使用extract-text-webpack-plugin 將樣式提取,此組件並不支持熱更新。只會重新打包但是並不會刷新頁面。
官方建議在開發環境中關閉ExtractText組件。
html 問題
html-webpack-plugin 創建html 並不經過entry的入口,並沒有在熱更新的檢測范圍,所以並沒有熱更新
總結:css 和 html 沒有熱更新的原因是沒有進入到entry 入口,不在熱跟新的檢測范圍內。
解決方案1:
使用express、webpack-dev-middleware和webpack-hot-middeware手動搭建一個高定制化的node 服務器。幫html和樣式文件也納入到熱更新的檢測范圍。
此方法成本比較高。如果不熟練,容易衍生更多問題-_-||
解決方案2:
css:開發環境中使用style-loader。
html:在入口文件利用raw-loader 加載一下你的index.html 文件。(個人並沒有驗證此方法。)
總的來說是讓html和css文件進入到webpack的熱更新的檢測范圍。
解決方案3:
使用LiveReload瀏覽器插件。
需要兩個部分:
- 在系統安裝 liveReload 客戶端服務器 作用:檢測指定文件變化
- 在瀏覽器安裝 liveReload 插件 執行更新行為。
此方案簡單粗暴,不用修改配置文件,不會衍生其他問題。