Devtool

devtool 옵션은 소스맵 생성 여부와 방법을 제어합니다.

보다 세밀한 설정을 위해 SourceMapDevToolPlugin을 사용하세요. 기존 소스맵을 처리하려면 Rule.extractSourceMap를 참고하세요.

devtool

string = 'eval' Array<{ type: "all" | "javascript" | "css", use: string }> false

디버깅 과정 향상을 위해 source mapping 스타일을 선택합니다. 이 값은 빌드 및 리빌드 속도에 큰 영향을 미칠 수 있습니다.

또한 다양한 자산 유형에 대해 서로 다른 소스 맵 스타일을 구성하기 위해 객체 배열을 제공할 수도 있습니다.

webpack.config.js

export default {
  // ...
  devtool: [
    { type: "javascript", use: "source-map" },
    { type: "css", use: "inline-source-map" },
  ],
};

type 필드는 어떤 자산 유형이 devtool 값을 받아야 하는지 지정합니다.

• "all" - 모든 자산 유형(JavaScript 및 CSS)에 적용
• "javascript" - JavaScript 파일에만 적용
• "css" - CSS 파일에만 적용

배열을 사용하는 경우 각 항목은 순서대로 처리됩니다. 문자열 값을 제공하면 { type: "all", use: "your-string-value" }로 처리됩니다.

T>devtool 옵션을 사용하는 대신, 더 많은 옵션이 있는 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin을 직접 사용할 수도 있습니다. devtool 옵션과 플러그인을 함께 사용해서는 안 됩니다. devtool 옵션은 내부적으로 플러그인을 추가하므로 플러그인을 두 번 적용하는 것과 같습니다.

이 값 중 일부는 개발에, 일부는 프로덕션에 적합합니다. 개발의 경우 일반적으로 번들 크기 보다는 빠른 소스맵이 필요합니다. 하지만 프로덕션의 경우 정확하고 최소화를 지원하는 별도의 소스맵이 필요합니다.

Qualities

bundled code - 생성된 모든 코드가 큰 코드 blob으로 표시됩니다. 모듈은 서로 분리되어 있지 않습니다.

generated code - 각 모듈은 서로 분리되고 모듈 이름으로 주석이 표시됩니다. webpack에 의해 생성된 코드가 표시됩니다. 예를 들면 import {test} from "module"; test(); 대신, var module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(42); module__WEBPACK_IMPORTED_MODULE_1__.a();이 표시됩니다.

transformed code - 각 모듈은 서로 분리되고 모듈 이름으로 주석이 표시됩니다. webpack이 변환하기 전이지만, 로더가 트랜스파일한 후의 코드가 표시됩니다. 예를 들면, import {test} from "module"; class A extends test {} 대신, import {test} from "module"; var A = function(_test) { ... }(test);와 같은 코드가 표시됩니다.

original source - 각 모듈은 서로 분리되고 모듈 이름으로 주석이 표시됩니다. 개발자가 작성한 트랜스파일 전의 코드를 ë³¼ 수 있습니다. 이것은 로더 지원에 따라 다릅니다.

without source content - 소스맵에 소스의 내용이 포함되지 않습니다. 일반적으로 브라우저는 웹 서버 또는 파일 시스템에서 소스를 로드합니다. 소스 URLê³¼ 일치하도록 output.devtoolModuleFilenameTemplate을 올바르게 설정해야 합니다.

(lines only) - 소스맵이 한 줄당 하나의 매핑으로 단순화됩니다. 이것은 일반적으로 구문당 단일 매핑을 의미합니다 (이 방식으로 개발자가 작성했다고 가정합니다). 이를 통해 구문 레벨에서 디버깅 실행을 방지하고, 하나의 라인에서 열에 중단점을 설정할 수 없습니다. 최소화 도구는 보통 한 줄로 내보내므로 최소화와 함께 사용하는 것은 불가능합니다.

Development

다음 옵션은 개발에 이상적입니다.

eval - 각 모듈을 eval() 및 //# sourceURL을 통해 실행합니다. 이것은 꽤 빠릅니다. 원본 코드 대신 트랜스파일된 코드에 매핑되기 때문에 줄 번호가 올바르게 표시되지 않는 것이 가장 큰 단점입니다. (로더의 소스맵이 없음)

eval-source-map - 각 모듈을 eval()으로 실행되고 소스맵을 eval()에 DataUrl로 추가합니다. 처음에는 느리지만, 리빌드를 빠르게 제공하고 실제 파일을 생성합니다. 줄 번호는 원본 코드에 매핑되므로 올바르게 매핑됩니다. 최고 품질의 개발용 소스맵을 생성합니다.

eval-cheap-source-map - eval-source-mapê³¼ 유사하며 각 모듈을 eval()으로 실행합니다. 열 매핑이 없고 줄 번호만 매핑하므로 비용이 "저렴"합니다. 로더의 소스맵을 무시하고 eval devtoolê³¼ 비슷하게 트랜스파일 된 코드만 표시합니다.

eval-cheap-module-source-map - eval-cheap-source-mapê³¼ 유사하지만, 이 경우 더 나은 결과를 위해 로더의 소스맵을 사용합니다. 그러나 로더의 소스맵은 라인 당 단일 매핑으로 단순화됩니다.

Special cases

다음 옵션은 개발이나 프로덕션에 적합하지 않습니다. 써드 파티 도구를 사용하는 등, 특별한 경우에 필요합니다.

inline-source-map - 소스맵을 DataUrl로 번들에 추가합니다.

cheap-source-map - 로더 소스맵을 무시하고 열 매핑이 없는 소스맵입니다.

inline-cheap-source-map - cheap-source-mapê³¼ 유사하지만, 소스맵을 DataUrl로 번들에 추가합니다.

cheap-module-source-map - 열 매핑이없는 소스맵이며 로더의 소스맵을 줄 당 단일 매핑으로 단순화합니다.

inline-cheap-module-source-map - cheap-module-source-mapê³¼ 비슷하지만, 소스맵을 DataUrl로 번들에 추가합니다.

Production

아래의 옵션은 일반적으로 프로덕션에서 사용됩니다.

(none)(devtool 옵션 생략 또는 devtool: false로 설정) - 소스맵을 내보내지 않습니다. 이것은 시작하기에 좋은 옵션입니다.

source-map - 전체 소스맵을 별도의 파일로 내보냅니다. 번들에 참조 주석을 추가하여 개발 도구에서 찾을 수 있도록 합니다.

hidden-source-map - source-mapê³¼ 동일하지만 번들에 참조 주석을 추가하지 않습니다. 오류 보고서의 오류 스텍 추적에만 소스맵을 매핑하고 브라우저 개발 도구에는 소스맵을 노출하지 않는 경우에 유용합니다.

nosources-source-map - sourcesContent없이 소스맵이 생성됩니다. 모든 소스 코드를 노출하지 않고 클라이언트에서 스텍 추적을 매핑하는 데 사용할 수 있습니다. 소스맵 파일을 웹 서버에 배포 할 수 있습니다.