소스 맵
소스 맵(Source Map)이란 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능입니다. 보통 서버에 배포를 할 때 성능 최적화를 위해 HTML, CSS, JS와 같은 웹 자원들을 압축합니다. 그런데 만약 압축하여 배포한 파일에서 에러가 난다면 어떻게 디버깅을 할 수 있을까요?
정답은 바로 소스 맵을 이용해 배포용 파일의 특정 부분이 원본 소스의 어떤 부분인지 확인하는 것입니다. 이러한 편의성을 제공하는 것이 소스 맵입니다.
소스 맵 설정하기
웹팩에서 소스 맵을 설정하는 방법은 아래와 같습니다.
// webpack.config.js
module.exports = {
devtool: 'cheap-eval-source-map'
}
devtool 속성을 추가하고 소스 맵 설정 옵션 중 하나를 선택해 지정해주면 됩니다.
소스 맵 설정 옵션
위에서 정의한 소스 맵 설정 옵션 이외에도 많은 옵션들이 있습니다. 자세한 옵션 속성과 비교는 다음 링크로 확인하세요.