javascript - VUEX如何配合webpack使用熱重載？如何實現CSS熱重載？

Question

使用webpack-dev-server來開發
現在想保持vuex的狀態來更新CSS，

如果使用webpack-dev-server --hot 可以保持狀態但只能更新js, css修改了沒反應（.vue檔案裡面）
如果使用webpack-dev-server --inline 可以更新CSS，但不能保持狀態

求解！

Answer 1

自問自答：
問題出在開發環境我用了extract-text-webpack-plugin抽出了CSS，由於瀏覽器的快取（可能原因）導致CSS的更改沒有傳遞給瀏覽器。

因此解決方法就是直接將CSS輸出到HTML裡的style標籤，這樣CSS的熱重載就生效了（保持VUEX狀態）。也不需要vue-hot-reload-api,vue-loader自帶了。

有一點疑問，為什麼js也是抽出來單獨一個文件，但卻支持熱重載，沒有緩存的問題，然而CSS卻有。我覺得可能與vue-loader的熱重載底層實作有關。

Answer 2

可以參考我的這篇部落格：

http://ewind.us/2017/webpack-...

NPM 指令採用 webpack-dev-server --hot --inline 即可。另外記得加入 vue-hot-reload-api 依賴。