프로젝트를 리팩토링하던 도중 아래와 같은 경고를 발견하게 되었습니다.
이는 웹팩에서 발생하는 경고로 소스맵을 로드하지 못한다고 말하고 있습니다.
소스맵이란?
우리가 작성하는 코드들은 사람에게 친화적으로 작성되기 때문에 성능에 방해되는 요소들(변수와 함수의 긴 이름, 주석, 공백, 들여쓰기 등)이 많이 포함되어 있습니다.
이는 파일의 크기를 늘리는 주 원인이 되기 때문에 실제 배포할 때는 webpack과 같은 툴을 사용해 경량화 작업을 진행합니다.
경량화가 진행 된 파일의 확장자 앞 쪽에는 종종 min이라는 이름이 붙기 때문에 min파일이라고 통칭하겠습니다.
이 min파일은 성능을 위해 불필요한 요소들을 쳐낸 대신 파일 내부의 코드가 사람이 읽기 어렵도록 변경됩니다.
빌드 또는 배포 후 문제가 없으면 다행이겠지만 만약, 문제가 발생 할 경우 디버깅을 진행해야 하는데 사진과 같은 코드를 디버깅을 하는것은 매우 어렵습니다.
따라서, min파일의 특정 부분에서 문제가 발생했을 때 해당 부분이 원본 파일의 어느 부분인지를 알려주는 역할을 하는게 바로 소스맵 파일입니다.
출처: https://developer.chrome.com/blog/sourcemaps/#real-world
소스맵 파일은 컴파일러 또는 툴에 따라 차이가 있을 수 있지만
보통 원본 파일의 파일명, 해당 라인, 컬럼(또는 함수명)등에 대한 정보가 포함되어 있습니다.
source-map-loader가 필요한 이유
source-map-loader는 프로젝트 내부에서 webpack 이외의 서드파티 라이브러리를 사용할 때 필요합니다.
JS에서 대부분의 라이브러리는 node_modules폴더 내부에 위치하며 라이브러리들은 이미 경량화 작업이 되어 있습니다.
위에서 말했듯이 툴에 따라 소스맵 파일의 내용은 다를 수 있기 때문에 만약 라이브러리와 관련된 문제가 발생했을 때 원인을 파악하기 어려울 수 있습니다.
그래서 source-map-loader는 경량화 작업을 진행할 때 라이브러리가 가지고 있는 기존 소스맵 파일을 자신의 설정에 맞춰 다시 생성함으로써 소스맵 파일을 통일화해 디버깅에 용이하도록 처리해주는 역할을 해줍니다.
