웹 팩 포장 과정 에서 그림 의 경로 로 인 한 문제

최근 에 자신의 개인 블 로 그 를 만 들 때 이런 문제 가 발생 했 습 니 다.CSS 에서 배경 그림 으로 상대 적 인 경 로 를 사 용 했 습 니 다.다음 과 같 습 니 다.

그리고 전체 프로젝트 를 웹 팩 으로 포장 한 후에 브 라 우 저 에서 실 행 했 는데 오류 가 발생 했 습 니 다.오 류 는 다음 과 같 습 니 다.

즉,포장 한 후에 이 그림 파일 을 찾 을 수 없 게 되 었 는데 그 이 유 는 어디 에 있 습 니까?웹 팩.config.js 파일 에 있 는 제 설정 을 살 펴 보 겠 습 니 다.

여기 서 사실 제 loader 는 잘못된 것 을 사용 하지 않 았 습 니 다.그림 에 대응 하 는 것 은 url-loader 로 처리 하 는 것 입 니 다.그러면 웹 팩 을 통 해 포장 한 디 렉 터 리 를 다시 보 겠 습 니 다.

dist 폴 더 에 압축 해서 만 들 려 는 파일 build.js 가 나타 나 고 그림 파일 도 추가 로 생 성 되 었 습 니 다.이 파일 은 바로 방금 CSS 에 있 었 습 니 다.
지정 한 배경 그림 입 니 다.브 라 우 저의 오류 메 시 지 를 통 해 build.js 가 지정 한 이 그림 의 주소 가 현저히 정확 하지 않 습 니 다.기본 적 인 상황 에서 포장 과정 은
사용 한 그림 을 output path 가 지정 한 디 렉 터 리 에 복사 합 니 다.그러나 build.js 에서 인용 한 그림 경 로 는 전체 프로젝트 파일 의 루트 디 렉 터 리 가 확실 하기 때문에 자 연 스 럽 게 인용 합 니 다.
소 용 없어 요.그럼 어떻게 처리 해 야 하나 요?웹 팩.config.js 파일 에서 output 대상 에 publicPath 속성 을 지정 합 니 다.정적 자원(그림 등)의 발표 지 를 지정 합 니 다.
주소,이 속성 을 설정 하면 패키지 파일(즉 build.js)에서 상대 경 로 를 통 해 인 용 된 모든 자원 이 설 정 된 경로 로 대 체 됩 니 다.그래서 이 설정 을 통 해
이후 build.js 에서 이 그림 을 참조 하 는 경 로 는 처음 루트 디 렉 터 리 의 경로 뒤에 publicPath 가 지정 한 경 로 를 추가 하기 때문에 웹 팩.config.js 에 추가 합 니 다.
아래 그림 의 빨간색 상자 의 내용 을 보면 됩 니 다:

그러면 최종 적 으로 실행 하면 dist 폴 더 를 통 해 생 성 된 그림 을 찾 을 수 있 습 니 다!
이상 의 이 간단 한 이야기 웹 팩 포장 과정 에서 사진 의 경로 로 인해 발생 하 는 문 제 는 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.