javascript - Wie nutzt VUEX Hot-Reloading mit WebPack? Wie implementiert man CSS-Hot-Reload?

Question

Verwenden Sie webpack-dev-server zum Entwickeln
Jetzt möchte ich den Status von Vuex beibehalten, um CSS zu aktualisieren,

Wenn Sie webpack-dev-server --hot verwenden, können Sie den Status beibehalten, aber nur js aktualisieren, CSS reagiert nach der Änderung nicht (in der Datei .vue). ) webpack-dev-server --hot 可以保持状态但只能更新js, css修改了没反应（.vue文件里面）
如果使用 webpack-dev-server --inlineWenn Sie webpack-dev-server --inline verwenden, können Sie CSS aktualisieren, aber den Status nicht beibehalten

Finden Sie die Lösung!

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 依赖。