웹팩 소스맵 특징

https://ibocon.tistory.com/269

vs code에서 디버깅을 하려고 break point를 잡으면, 번들되어있는 파일때문에 번들파일 기준으로 에러 위치가 잡히기 때문에, 개발하는 입장에서 상당히 귀찮음이 아닐 수 없다.

그래서 console.log 주도 개발이 이루어지기도 한다 ㅎ

여기서 사용하는 것이 소스맵인데, 개발하는 코드와 번들링된 코드 사이의 관계를 표현하는 데이터를 뜻한다.

javascript를 번들하는 것 뿐만 아니라, typescript를 javascript로 컴파일할 때에도 디버깅을 위한 소스맵이 필요하다.

일단 webpack을 통해서 번들링된 bundle.js의 파일 끝에 보면 다음과 같은 주석이 포함된 것을 알 수 있다.

//# sourceMappingURL=manage-0.5.1.js.map

브라우저는 위 주석을 읽고 소스맵이 저장한 파일을 찾아서, 그 파일을 바탕으로 원래 코드와 번들된 코드를 연결한다.

기본적으로 아래와같은 옵션의 조합으로 소스맵을 설정할 수 있다.

• source-map
  가장 기본적인 옵션으로, map파일을 만들고 url에 파일 경로를 추가한다.
• eval
  eval이 붙는 소스맵 옵션은 javascript 함수인 eval()을 사용하여 소스맵을 만든다.
  eval함수로 각 모듈을 실행시키기 떄문에 수정된 모듈만 재빌드해서 빠르지만 정확한 소스 코드 위치를 매핑하지 못하는 경우가 종종있다고 한다.
• inline
  map파일을 만들지 않고, 주석에 파일을 data URL로 적는다.
  즉, 소스맵이 독립된 파일로 존재하지 않고, bundle.js파일 내에 포함되게 되는 것이고
  이는 번들 파일의 용량을 많이 잡아먹는다.
• cheap
  cheap 옵션은 라인 넘버만 매핑하고 라인에서 몇 번째 글자인지는 매핑하지 않는다.
  그래서 빠르게 빌드가 가능한 반면에 정확한 매핑은 포기하는 것이다.

그럼 어떻게 소스맵이 소스코드를 찾는 것일까?

일반적으로 bundle.js.map 파일은 json 포맷으로 만들어진다.

{
  "version": 3,
  "file": "bundle.js",
  "sourceRoot": "",
  "sources": ["a.js", "b.js"],
  "names": ["src", "maps", "are", "fun"],
  "mappings": "AAgBC,SAAQ,CAAEA"
}

sources는 번들파일을 만드는데 필요한 소스코드파일 목록이고,
names는 소스 코드의 모든 변수와 함수이름이 들어가고,
mappings는 실제 코드와 매핑할 수 있도록 하는 데이터이고 BASE64로 인코딩되어 기록된다

그래서 디버깅시에는, sources에 소스파일이 포함되어 있는지 한번보고,
디버깅하려는 변수 또는 함수가 names에 있는지 보고,
모두 있으면 mappings에 있는 정보를 읽어서 정확한 위치를 알려준다.