file-loader 그림 파일 을 포장 할 때 경로 오류 출력 을[object-module]로 하 는 해결 방법

최근 웹 팩 4.0 을 사용 하여 vue 비 계 를 만 드 는 것 을 배우 고 있 습 니 다.구축 과정 에서 많은 구 덩이 를 밟 았 습 니 다.file-loader 로 사진 파일 을 포장 할 때 다음 과 같은 문제 가 발생 했 습 니 다.
이것 은 제 웹 팩 처리 패키지 사진 관련 설정 항목 입 니 다:

...
module: {
 rules: [
 ...
 {
  test: /\.(jpe?g|png|gif|svg)$/i,
  use: [
  {
   loader: 'url-loader',
   options: {
   limit: 10000,
   name: '[name].[ext]',
   outputPath: 'imgs/'
   }
  }
  ]
 },
 ...
 ]
}
...

이 설정 도 현재 인터넷 튜 토리 얼 과 차이 가 많 지 않다.url-loader을 사용 하여 그림 파일 을 컴 파일 하여 imgs 폴 더 에 출력 합 니 다.얼핏 봐 도 문제 가 없습니다.당신 도 그렇게 생각 하 실 거 라 고 믿 습 니 다.
그러나 웹 팩 이 구축 되면 페이지 에 인 용 된 그림 이 제대로 표시 되 지 않 습 니 다.

그림 참조 오류
콘 솔 을 열 면 모든 그림 의 경로 가 바 뀌 었 음 을 발견 할 수 있 습 니 다[object module]
object module
노력 한 탐색 을 통 해 마침내 stackoverflow 에서 해당 하 는 문 제 를 찾 았 다.
아래 대답 해 주세요.
기본적으로 file-loader 는 ES 모듈 문법 을 사용 하 는 JS 모듈 을 생 성 합 니 다.어떤 경우 에는 ES 모듈 을 사용 하 는 것 이 유익 하 다.예 를 들 어 모듈 연결 과 트 리 가 떨 리 는 상황 에서.

file-loader-options
한 마디 로 file-loader 새 버 전 은 기본적으로 esModule 문법 을 사용 하여 그림 파일 을 참조 하 는 방식 이 이전 버 전과 다 릅 니 다.창고 의 release 를 보면 v 4.3.0 버 전에 서 이 새로운 기능 을 도입 한 것 을 알 수 있 습 니 다.

file-loader-versions
그럼 이 문 제 를 어떻게 해결 합 니까?아까 stackoverflow 질문 에 두 가지 해결 방법 이 설명 되 어 있 습 니 다.
그림 을 인용 할 때 접미사.default를 추가 합 니 다.

<img src="require('assets/logo.png').default"/>

웹 팩 의 file-loader 설정 항목 에서 esModule 을 false 로 설정 합 니 다.

{
 test: /\.(jpe?g|png|gif|svg)$/i,
 use: [
 {
  loader: 'file-loader',
  options: {
  esModule: false
  }
 }
 ]
}

두 가지 방법 을 비교 해 보면 어떤 방법 이 더 좋 은 지 이미 알 고 있 을 것 이다.그래서 나 는 웹 팩 설정 을 수정 한 후에 다시 컴 파일 하면 문제 가 없다.wink:.

build-success
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.