javascript - VUEX는 webpack에서 핫 리로딩을 어떻게 사용합니까? CSS 핫 리로드를 구현하는 방법은 무엇입니까?

Question

webpack-dev-server를 사용하여 개발
이제 vuex 상태를 유지하여 CSS를 업데이트하고 싶습니다.

webpack-dev-server --hot을 사용하면 상태를 유지할 수 있지만 js만 업데이트할 수 있고, CSS는 수정 후(.vue 파일에서) 응답하지 않습니다. ) webpack-dev-server --hot 可以保持状态但只能更新js, css修改了没反应（.vue文件里面）
如果使用 webpack-dev-server --inline webpack-dev-server --inline을 사용하면 CSS를 업데이트할 수 있지만 상태를 유지할 수는 없습니다

해결책을 찾아보세요!

Answer 1

질문과 답변:
문제는 extract-text-webpack-plugin을 사용하여 CSS를 추출한 것입니다. 브라우저의 캐시로 인해(가능한 이유) CSS 변경 사항이 브라우저로 전송되지 않았습니다.

그래서 해결책은 CSS를 HTML의 스타일 태그에 직접 출력하여 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 종속성을 취합니다.