問(wèn)題描述

使用webpack-dev-server來(lái)開(kāi)發(fā)現(xiàn)在想保持vuex的狀態(tài)來(lái)更新CSS，

如果使用 webpack-dev-server --hot 可以保持狀態(tài)但只能更新js, css修改了沒(méi)反應(yīng)（.vue文件里面）如果使用 webpack-dev-server --inline 可以更新CSS，但不能保持狀態(tài)

求解！

問(wèn)題解答

自問(wèn)自答：?jiǎn)栴}出在開(kāi)發(fā)環(huán)境我用了extract-text-webpack-plugin抽出了CSS，由于瀏覽器的緩存（可能原因）導(dǎo)致CSS的更改沒(méi)有傳遞給瀏覽器。

因此解決辦法就是直接將CSS輸出到HTML里的style標(biāo)簽，這樣CSS的熱重載就生效了（保持VUEX狀態(tài)）。也不需要vue-hot-reload-api,vue-loader自帶了。

有一點(diǎn)疑問(wèn)，為什么js也是抽出來(lái)單獨(dú)一個(gè)文件，但卻支持熱重載，沒(méi)有緩存的問(wèn)題，然而CSS卻有。我覺(jué)得可能與vue-loader的熱重載底層實(shí)現(xiàn)有關(guān)。

可以參考我的這篇博客：

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

NPM 命令采用 webpack-dev-server --hot --inline 即可。另外記得添加 vue-hot-reload-api 依賴(lài)。