[Webpack] devtool 종류

devtool(개발자 도구)란?

브라우저에서 제공하는 하나의 도구.

배포용으로 만든 파일에서 에러가 발생했을 때, 

문제 해결의 원인을 파악하여 원본 파일의 어디에서 에러가 났는지를 알려주는 소스 맵(source map).

 

개발 모드에서 일반적으로 쓰이는 옵션

• eval
• eval-source-map
• eval-cheap-source-map
• eval-cheap-module-source-map

 

이외의 웹팩에서 제공하는 devtool 

devtool	performance	production	quality	설명
(none)	build: 가장 빠름 (초기 빌드 속도) rebuild: 가장 빠름 (재빌드 속도)	yes	bundle (묶음)	최대 성능을 갖춘 프로덕션 빌드를 위해 추천하는 옵션입니다.
eval	build: 빠름 rebuild: 가장 빠름	no	generated (새로 만든)	최대 성능을 갖춘 개발 빌드를 위해 추천하는 옵션.
eval-cheap-source-map	build: 보통 rebuild: 빠름	no	transformed (탈바꿈한)	개발 빌드를 위한 균형 잡힌 옵션.
eval-cheap-module-source-map	build: 느림 rebuild: 빠름	no	original lines (원문)	개발 빌드를 위한 균형 잡힌 옵션. 빌드 중에 소스 맵을 생성하는 가장 빠른 방법.
eval-source-map	build: 가장 느림 rebuild: 보통	no	original (원래의)	모든 기능이 포함된 소스맵을 별도의 파일로 생성함. 그래서 빌드 프로세스가 느려짐. 고품질 소스맵을 포함한 개발 빌드를 위해 추천하는 옵션. 에러코드가 표시될 때 브라우저 콘솔에서  원본 코드의 줄번호가 아닌 번들링 된 파일의 줄번호 알려줌.
cheap-source-map	build: 보통 rebuild: 느림	no	transformed
cheap-module-source-map	build: 느림 rebuild: 느림	no	original lines
source-map	build: 가장 느림 rebuild: 가장 느림	yes	original	별도의 파일에 칼람 매핑을 제외한 소스 맵을 생성.  칼람 매핑을 생략하면 빌드 속도는 향상되지만 디버깅할 때 약간 불편함. 브라우저가 개발자 툴은 원래 소스 파일의 행을 가리킬 수 있으며, 특정 칼람(또는 문자열)을 가릴 수 없음. 고품질 소스맵을 포함한 프로덕션 빌드를 위해 추천하는 옵션.
inline-cheap-source-map	build: 보통 rebuild: 느림	no	transformed
inline-cheap-module-source-map	build: 느림 rebuild: 느림	no	original lines
inline-source-map	build: 가장 느림 rebuild: 가장 느림	no	original	단일 파일을 내보낼 때 선택할 수 있다. 에러코드가 표시될 때 브라우저 콘솔에서 원본 코드의 구체적인 줄번호 알려줌.
eval-nosources-cheap-source-map	build: 보통 rebuild: 빠름	no	transformed	소스 코드 포함 X
eval-nosources-cheap-module-source-map	build: 느림 rebuild: 빠름	no	original lines	소스 코드 포함 X
eval-nosources-source-map	build: 가장 느림 rebuild: 보통	no	original	소스 코드 포함 X
inline-nosources-cheap-source-map	build: 보통 rebuild: 느림	no	transformed	소스 코드 포함 X
inline-nosources-cheap-module-source-map	build: 느림 rebuild: 느림	no	original lines	소스 코드 포함 X
inline-nosources-source-map	build: 가장 느림 rebuild: 가장 느림	no	original	소스 코드 포함 X
nosources-cheap-source-map	build: 보통 rebuild: 느림	no	transformed	소스 코드 포함 X
nosources-cheap-module-source-map	build: 느림 rebuild: 느림	no	original lines	소스 코드 포함 X
nosources-source-map	build: 가장 느림 rebuild: 가장 느림	yes	original	소스 코드 포함 X
hidden-nosources-cheap-source-map	build: 보통 rebuild: 느림	no	transformed	참조 X, 소스 코드 포함 X
hidden-nosources-cheap-module-source-map	build: 느림 rebuild: 느림	no	original lines	참조 X, 소스 코드 포함 X
hidden-nosources-source-map	build: 가장 느림 rebuild: 가장 느림	yes	original	참조가 없으며, 소스 코드 포함 X
hidden-cheap-source-map	build: 보통 rebuild: 느림	no	transformed	참조 X
hidden-cheap-module-source-map	build: 느림 rebuild: 느림	no	original lines	참조 X
hidden-source-map	build: 가장 느림 rebuild: 가장 느림	yes	original	배포 모드에 적절. 참조 X 에러 보고 목적으로 소스맵을 사용할 때 선택. 에러코드가 표시될 때 브라우저 콘솔에서  원본 코드의 줄번호가 아닌 번들링 된 파일의 줄번호 알려줌.

 

웹팩 공부하다가 devtool 뭐지 하고 사이트 들어갔는데

하난 줄 알았던 devtool...이마이 많이 나옴...

솔직히 잘못 본 줄. 급 눈 침침

 와이라노,,,

 

 

참고

Devtool | 웹팩