URL: webpack의 devtool에 대한 자세한 설명
개발 환경은 다음을 사용하는 것이 좋습니다.
1.eval: 각 모듈은 eval() 및 //@sourceURL을 사용하여 실행됩니다. 매우 빠릅니다. 주요 단점은 원래 코드가 아닌 트랜스파일된 코드에 매핑되기 때문에 줄 번호를 올바르게 표시하지 않는다는 것입니다(로더에서 소스 맵이 없음).
2.eval-source-map: 각 모듈은 eval()을 사용하여 실행되며 SourceMap은 eval()에 DataUrl로 추가됩니다. 처음에는 느리지만 빠른 재구축 속도를 제공하고 사실적인 파일을 생성합니다. 줄 번호는 원래 코드에 매핑된 것처럼 올바르게 매핑됩니다. 최고 품질의 개발 자원을 생산합니다.
3.cheap-eval-source-map: eval-source-map과 마찬가지로 각 모듈은 eval()을 사용하여 실행됩니다. 열을 매핑하지 않고 행 번호만 매핑합니다. 로더의 소스 코드를 무시하고 eval devtool과 유사하게 변환된 코드만 표시합니다.
4. cheap-module-eval-source-map: cheap-eval-source-map과 유사하게 이 경우 로더의 소스 맵이 더 나은 결과를 위해 처리됩니다. 그러나 로더 소스 맵은 라인당 단일 맵으로 축소됩니다.
생산 환경은 다음을 사용하는 것이 좋습니다.
1.(없음): (devtool 옵션 생략) - SourceMap을 트리거하지 않습니다. 이것은 훌륭한 옵션입니다.
2.source-map: 완전한 SourceMap은 별도의 파일입니다. 번들에 참조 주석을 추가하므로 개발 도구는 참조 주석을 찾을 위치를 알 수 있습니다.
3.hidden-source-map: source-map과 동일하지만 참조 주석을 번들에 추가하지 않습니다. SourceMaps가 오류 보고서의 오류 스택 추적을 매핑하기만 하고 브라우저 개발 도구에 대한 SourceMaps를 노출하지 않으려는 경우 이 옵션을 사용하십시오.
4. nosources-source-map: SourceMap은 소스 코드 없이 생성됩니다. 모든 소스 코드를 노출하지 않고 클라이언트 시스템에서 스택 추적을 매핑하는 데 사용할 수 있습니다. 소스 맵 파일을 웹 서버에 배포할 수 있습니다.