vue+webpack 프로젝트 디 버 깅 방법 절차
웹 팩 부터.
바로 본론 으로 들어가다.vue 프로젝트 를 디 버 깅 하기 어 려 운 것 은 웹 팩 을 사 용 했 기 때 문 이 라 고 생각 하 는 사람 이 있다.모든 코드 가 한데 얽 혀 있 고 프레임 코드 도 많이 넣 어 어떻게 손 을 써 야 할 지 전혀 몰 랐 다.그래서 vue+webpack 디 버 깅 은 webpack 에서 시작 해 야 합 니 다.우 리 는 우선 일반적인 상황 부터 말 하 자.
-sourcemap웹 팩 설정 은 devtool 이라는 옵션 을 제공 합 니 다.'\#source-map'로 설정 하면.map 파일 을 생 성 할 수 있 습 니 다.chrome 브 라 우 저 에서 디 버 깅 할 때 소스 코드 를 표시 할 수 있 습 니 다.
devtool: '#source-map'
여기 서 서로 다른 설정 은 서로 다른 효과 가 있 습 니 다.예 를 들 어 주석 을 보류 하 는 지,줄 정 보 를 보류 하 는 지 등 입 니 다.구체 적 으로 모든 뜻 은 여기 서 상세 하 게 설명 하지 않 고 관심 이 있 는 동 화 는 이 글 을 참고 할 수 있 습 니 다.
공식 적 으로'\#cheap-module-eval-source-map'을 사용 합 니 다.
devtool: '#cheap-module-eval-source-map'
또는 해당 파일 을 직접 찾 습 니 다.chrome 에서'ctrl(command)+p'로 파일 이름 을 입력 하면 해당 하 는 소스 코드 를 찾 을 수 있 습 니 다.
중단 점:
주의해 야 할 것 은 이곳 의 정지점 이 다음 줄 에 맞 을 것 이다.동시에 한 줄 의 코드 가 다음 줄 에서 실행 되 어야 실행 된다.
-vue-clivue 집 프로젝트 비계,추천 사용..vue-cli 고향 여기 있어 요. vue-cli 는 프로젝트 를 자동 으로 구축 할 수 있 습 니 다.우선 npm 전역 설치
npm install -g vue-cli
vue init webpack my-project여기 인터넷 에서 웹 팩 이 있 는 vue 프로젝트 를 다운 받 았 습 니 다.
bulid 폴 더 에서 대충 볼 수 있 습 니 다.
웹 팩 dev.conf:개발 모델 용웹 팩.prod.conf:생산 모델 용그 중에서 개발 모델 은 devtool 을'\#cheap-module-eval-source-map'으로 제공 하고 생산 모델 은 config 폴 더 의 production SourceMap 변수 에 따라 사용 여 부 를 제어 합 니 다.
true 라면 devtool 은'\#source-map'입 니 다.
기타 사용 방법 은 일치한다.매우 편리 하 다.
온라인 디 버 깅
평소에 개발 할 때,우 리 는 웹 팩 의 열 로 딩 을 사용 하여 디 버 깅 을 마 운 트 하 는 절 차 를 줄 일 수 있어 서 매우 편리 합 니 다.그러나 발표 후 서버 에 배치 되면 이 로 컬 장점 을 잃 게 된다.
파일 마 운 트 방식 을 사용 하면 번 거 로 울 수 있 습 니 다.웹 팩 이 작성 한 파일 은 버 전 번호 와 같은 정보 가 있 고 가방 을 발표 할 때 코드 의 양 을 기다 릴 수 있 기 때문에 이 방안 은 실제 적 이지 않 습 니 다.하지만 포트 에 열 로 딩 된 파일 을 마 운 트 했다 면 이 문 제 는 매우 쉬 울 것 입 니 다.
- 그 전에 웹 팩 의 열 로드 원 리 를 분석 해 보 세 요.프로젝트 패키지 에서 이 파일 을 발견 할 수 있 습 니 다:webpack_hmr
웹 팩 열 로 딩 서버 푸 시 이벤트 입 니 다.이벤트 소스 형식 으로 웹 소켓 과 기능 이 유사 합 니 다.대체적으로 멈 추 지 않 는 stream 스 트림 링크 를 만 드 는 역할 을 합 니 다.서버 는 업데이트 데 이 터 를 보 내 서 append 를 스 트림 의 끝 에 보 내 고 전단 에서 최신 append 의 데 이 터 를 읽 은 다음 에 동적 으로 페이지 에 있 는 것 을 업데이트 합 니 다.
다음은 앞에서 언급 한 업데이트 데이터 가 어떤 것 이 있 는 지 살 펴 보 겠 습 니 다.파일 을 마음대로 업데이트 하고 열 로 딩 을 촉발 하 며 가방 을 하나 더 잡 으 면'hot-update.json'두 개 와'hot-update.js'파일 이 있 습 니 다.
이것들 이 구체 적 으로 무엇 을 했 는 지 나 는 모른다.여 기 는 깊이 연구 하지 않 는 다.제 이 슨 의 데이터 에 따라 정확 한 업데이트 효 과 를 거 둘 것 이다.
그래서 핫 업 데 이 트 는 서버 의 데 이 터 를 감청 하 는 것 입 니 다.수정 이 있 으 면 서버 에서 데 이 터 를 보 내 고 전단 에서 데 이 터 를 가 져 와 페이지 로 교체 하 는 과정 입 니 다.
-AutoResponder다음은 온라인 마 운 트 테스트 에 대해 이야기 하 겠 습 니 다.여기 서 소프트웨어 를 추천 합 니 다:fiddlerfiddler 는 AutoResponsder 라 는 기능 이 있 습 니 다.한 주 소 를 다른 주 소 를 가리 킬 수 있 습 니 다.이 소프트웨어 를 사용 하 는 이 유 는 정규 와 일치 하고 편리 하기 때문이다.
지난 절 에 말 했 듯 이 웹 팩 열 로드 는 이 몇 가지 파일 을 사 용 했 습 니 다.
가설:
온라인 주소:http://192.168.9.189
로 컬 서버 주소:http://localhost:8080/
인 터 페 이 스 를 고려 하기 위해 서 는*를 모두 일치 시 킬 수 없습니다.(위의 그림 fiddler 의 마지막 회색)
request matches
respond with
EXACT:http://192.168.9.189/index.html
http://localhost:8080/
EXACT:http://192.168.9.189/__webpack_hmr
http://localhost:8080/__webpack_hmr
regex:http://192.168.9.189/([^.]+).js$
http://localhost:8080/$1.js
regex:http://192.168.9.189/(.+).hot-update.json$
http://localhost:8080/$1.hot-update.json
regex:http://192.168.9.189/(.+).hot-update.js$
http://localhost:8080/$1.hot-update.js
debugger 를 열 면 vue 의 devtools 가 나 왔 습 니 다.
wap - 휴대 전화 디 버 깅 도 그리 번 거 롭 지 않다.컴퓨터 와 마찬가지 로 같은 랜 에서 주 소 를 입력 하면 효 과 를 볼 수 있다.최근 에 wap 엔 드 의 vue 프로젝트 를 만 들 고 있 습 니 다.여기 서 자신 이 사용 하 는 작은 기 교 를 이야기 합 니 다.4.567917.아이 폰 은 safari 로 요 소 를 검사 할 수 있다.안 드 로 이 드 는 chrome 원 격 으로 디 버 깅 할 수 있 습 니 다와 이 파이 의 http 에이 전 트 는 핸드폰 의 네트워크 요청 을 전송 할 수 있 으 며,이 컴퓨터 에 걸 면 패키지 데 이 터 를 캡 처 할 수 있 습 니 다
핸드폰 로드 가 느 릴 때 http 프 록 시 를 사용 하여 호스트 에 전송 할 수 있 고 재 방문 속도 가 비교적 빠르다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Qiita API v2를 Ajax에서 사용하기위한 webpack 설정 (로컬 개발 환경 전용)에서는 Qiita의 기사 목록, 사용자 세부 정보, 기사를 '좋아요'한 사람 목록 및 재고가 있는 사람 목록을 검색할 수 있습니다. Qiita 화면에서 기사를 재고한 사람을 볼 수 없기 때문에 API를 통해 기사를 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
