javascript - Comment Vuex utilise-t-il le rechargement à chaud avec Webpack? Comment implémenter le rechargement à chaud CSS ?

Question

Utilisez webpack-dev-server pour développer
Maintenant, je souhaite conserver le statut de vuex pour mettre à jour CSS,

Si vous utilisez webpack-dev-server --hot, vous pouvez maintenir l'état mais ne pouvez mettre à jour que js, css ne répondra pas après modification (dans le fichier .vue ) webpack-dev-server --hot 可以保持状态但只能更新js, css修改了没反应（.vue文件里面）
如果使用 webpack-dev-server --inlineSi vous utilisez webpack-dev-server --inline, vous pouvez mettre à jour le CSS, mais ne pouvez pas conserver l'état

Trouvez la solution !

Answer 1

Question et réponse :
Le problème réside dans l'environnement de développement. J'ai utilisé extract-text-webpack-pluginpour extraire le CSS En raison du cache du navigateur (raison possible), les modifications CSS n'ont pas été transmises au navigateur.

La solution est donc de sortir directement le CSS dans la balise de style en HTML, afin que le rechargement à chaud du CSS prenne effet (en maintenant l'état VUEX). Pas besoin d'apporter le vôtre. vue-hot-reload-api,vue-loader

J'ai une petite question, pourquoi js est-il extrait dans un fichier séparé, mais il prend en charge le rechargement à chaud, et il n'y a pas de problème de mise en cache, mais CSS oui. Je pense que cela peut être lié à l'implémentation sous-jacente du rechargement à chaud de vue-loader.

Answer 2

Vous pouvez vous référer à mon blog :

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

Les commandes

NPM prennent webpack-dev-server --hot --inline 即可。另外记得添加 vue-hot-reload-api dépendances.