[Webpack] 소스 맵(Source Map)이란?

 

 

[ 소스 맵 (Source Map) ] 

 

소스 맵(Source Map)이란 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능입니다.

보통 서버에 배포를 할 때 성능 최적화를 위해 HTML, CSS, JS와 같은 웹 자원들을 압축합니다. 그런데 만약 압축하여 배포한 파일에서 에러가 난다면 어떻게 디버깅을 할 수 있을까요?

 

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

 

[ 소스 맵 설정하기 ]

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

 

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

 

devtool 속성을 추가하고 소스 맵 설정 옵션 중 하나를 선택해 지정해주면 됩니다.