javascript - How does VUEX use hot reloading with webpack? How to implement CSS hot reload?

Question

Use webpack-dev-server to develop
Now I want to keep the state of vuex to update CSS,

If you use webpack-dev-server --hot you can maintain the state but can only update js, css has no response after modification (in the .vue file)
if you use webpack-dev-server --inline Can update CSS, but cannot maintain state

Solution!

Answer 1

Question and answer:
The problem lies in the development environment. I used extract-text-webpack-plugin to extract the CSS. Due to the browser's cache (possible reason), the CSS changes were not transmitted to the browser.

So the solution is to directly output the CSS to the style tag in HTML, so that the hot reload of CSS takes effect (maintaining the VUEX state). There is no need for vue-hot-reload-api and vue-loader.

I have a little question, why is js extracted into a separate file, but it supports hot reloading, and there is no caching problem, but CSS does. I think it may be related to the underlying implementation of hot reloading of vue-loader.

Answer 2

You can refer to this blog of mine:

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

NPM command uses webpack-dev-server --hot --inline. Also remember to add the vue-hot-reload-api dependency.