webpack 中 css 和 html 刷新問題的解決思路


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 插件 執行更新行為。

此方案簡單粗暴,不用修改配置文件,不會衍生其他問題。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM