Skip to content

Source Map

소스 맵(Source Map)이란 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능입니다. 보통 서버에 배포를 할 때 성능 최적화를 위해 HTML, CSS, JS와 같은 웹 자원들을 압축합니다. 그런데 만약 압축하여 배포한 파일에서 에러가 난다면 어떻게 디버깅을 할 수 있을까요?

정답은 바로 소스 맵을 이용해 배포용 파일의 특정 부분이 원본 소스의 어떤 부분인지 확인하는 것입니다. 이러한 편의성을 제공하는 것이 소스 맵입니다.

설정하기

웹팩에서 소스 맵을 설정하는 방법은 아래와 같습니다. 

// webpack.config.js
module.exports = {
  devtool: 'cheap-eval-source-map'
}

상황에 따른 설정

Development

다음 옵션은 개발에 이상적입니다.

eval
각 모듈을 eval() 및 //@ sourceURL을 통해 실행합니다. 이것은 꽤 빠릅니다. 원본 코드 대신 트랜스파일된 코드에 매핑되기 때문에 줄 번호가 올바르게 표시되지 않는 것이 가장 큰 단점입니다. (로더의 소스맵이 없음)
eval-source-map
각 모듈을 eval()으로 실행되고 소스맵을 eval()에 DataUrl로 추가합니다. 처음에는 느리지만, 리빌드를 빠르게 제공하고 실제 파일을 생성합니다. 줄 번호는 원본 코드에 매핑되므로 올바르게 매핑됩니다. 최고 품질의 개발용 소스맵을 생성합니다.
eval-cheap-source-map
eval-source-map과 유사하며 각 모듈을 eval()으로 실행합니다. 열 매핑이 없고 줄 번호만 매핑하므로 비용이 "저렴"합니다. 로더의 소스맵을 무시하고 eval devtool과 비슷하게 트랜스파일 된 코드만 표시합니다.
eval-cheap-module-source-map
eval-cheap-source-map과 유사하지만, 이 경우 더 나은 결과를 위해 로더의 소스맵을 사용합니다. 그러나 로더의 소스맵은 라인 당 단일 매핑으로 단순화됩니다.

Special cases

다음 옵션은 개발이나 프로덕션에 적합하지 않습니다. 써드 파티 도구를 사용하는 등, 특별한 경우에 필요합니다.

inline-source-map
소스맵을 DataUrl로 번들에 추가합니다.
cheap-source-map
로더 소스맵을 무시하고 열 매핑이 없는 소스맵입니다.
inline-cheap-source-map
cheap-source-map과 유사하지만, 소스맵을 DataUrl로 번들에 추가합니다.
cheap-module-source-map
열 매핑이없는 소스맵이며 로더의 소스맵을 줄 당 단일 매핑으로 단순화합니다.
inline-cheap-module-source-map
cheap-module-source-map과 비슷하지만, 소스맵을 DataUrl로 번들에 추가합니다.

Production

아래의 옵션은 일반적으로 프로덕션에서 사용됩니다.

(none) (devtool 옵션 생략)
소스맵을 내보내지 않습니다. 이것은 시작하기에 좋은 옵션입니다.
source-map
전체 소스맵을 별도의 파일로 내보냅니다. 번들에 참조 주석을 추가하여 개발 도구에서 찾을 수 있도록 합니다.
hidden-source-map
source-map과 동일하지만 번들에 참조 주석을 추가하지 않습니다. 오류 보고서의 오류 스텍 추적에만 소스맵을 매핑하고 브라우저 개발 도구에는 소스맵을 노출하지 않는 경우에 유용합니다.
nosources-source-map
sourcesContent없이 소스맵이 생성됩니다. 모든 소스 코드를 노출하지 않고 클라이언트에서 스텍 추적을 매핑하는 데 사용할 수 있습니다. 소스맵 파일을 웹 서버에 배포 할 수 있습니다.

See also

Favorite site