source map

웹팩을 실행하여 여러 모듈을 하나의 번들링 파일로 만들 때 자바스크립트에서 에러가 발생하면 브라우저의 콘솔에는 번들링된 하나의 파일 첫째줄에서 에러가 떴다고 알려주기 때문에 어떤 모듈의 몇 번째 줄에서 에러가 떴는지 정확히 알기 쉽지 않다.

쉽게 에러를 트래킹하기 위해 웹팩에서는 source map이라는 모듈을 사용한다.

 

이것은 에러가 발생하거나 디버깅할 때 번들링하기 전의 파일인 원래 소스 코드로 맵핑해주는 기능을 제공한다.

해당 기능은 다양한 옵션이 있으며 개발모드와 배포모드마다 옵션을 달리해야 적절한 기능을 사용할 수 있다.

devtool이라는 key에 source map의 옵션을 적는데 source map의 옵션은 너무나도 많다.

devtool을 설정하지 않거나 옵션을 적지 않았을 경우 빌드와 재빌드가 가장 빠르며 배포모드에서만 권장한다.

흔히 개발모드에서 eval-source-map, eval-cheap-source-map, inline-source-map을 자주 쓰며 공식 사이트에서는 eval-cheap-source-map을 권장하고 있다.

배포모드에서는 source map을 설정하지 않거나 hidden-source-map을 자주 쓴다고 한다.

다음 예시처럼 설정하면 된다.

// webpack.dev.js 파일 혹은 webpack.prod.js파일

// ...
module.exports = merge(common,{
  mode: // ... 개발모드 혹은 배포모드,
  devtool : 'eval-cheap-source-map', // 개발모드일 경우
  // ...
})

 

다음은 소스맵에 대한 간략한 설명이다.

eval-cheap-source-map

이 옵션은 에러 코드가 표시될 때 브라우저 콘솔에서 원본코드의 구체적인 줄이 아닌 번들링 된 파일 기준의 줄번호를 알려준다.

소스맵은 줄번호만 매핑되며 열 매핑은 되지 않는다.

이 옵션은 다른 옵션에 비해 초기빌드가 비교적 빠르며 재빌드 속도는 비교적 제일 빠르다.

 

eval-source-map

이 옵션은 모든 기능이 포함된 소스맵을 생성할 수 있어 고품질의 소스맵을 사용하는 개발모드에 권장된다.

하지만 이 옵션은 초기 빌드가 비교적 가장 느리다는 단점이 있지만 재빌드 속도는 비교적 빠르다.

또한 에러 코드가 표시될 때 브라우저 콘솔에서 원본코드의 구체적인 줄이 아닌 번들링 된 파일 기준의 줄번호를 알려주는 단점이 있다.

inline-source-map

이 옵션은 DataUrl로 소스맵이 추가되며 에러코드가 표시될 때 브라우저 콘솔에서 원본코드의 구체적인 줄번호도 알려준다.

하지만 이 옵션은 초기 빌드 속도가 비교적 가장 느리며 재빌드 속도도 비교적 가장 느리다는 단점이 있다.

hidden-source-map

이 옵션은 배포모드에 적절하며 번들링 파일에 참조 주석을 추가하지 않으며 에러코드가 표시될 때에도 번들링된 파일의 줄번호를 알려주어 디버깅하는데 불편함이 있다.

개인적으로 source map을 추가하지 않은 것과 별반 차이가 없어 필자는 배포모드 때 추가하지 않으며 source map을 적용하지 않는다.