웹 팩 의 devtool 상세 설명

Devtool 에 대하 여
이 옵션 은 원본 맵 을 만 드 는 방법 과 여 부 를 제어 합 니 다.홈 페이지 에서 선택 할 수 있 는 값 은 다음 과 같 습 니 다.

그 중 일 부 는 개발 에 적합 하고 일 부 는 생산 에 쓰 인 다.개발 에 있어 서 빠 른 Source Maps 가 필요 합 니 다.bundle 의 크기 를 대가 로 하지만 생산 에 있어 서 는 독립 적 인 Source Maps 가 필요 합 니 다.이것 은 정확 하고 최소 화 를 지원 합 니 다.
디 버 깅 과정 을 강화 하기 위해 원본 맵 스타일 을 선택 하 십시오.이런 수 치 는 구축 과 재건 속도 에 현저 한 영향 을 줄 수 있다.devtool 옵션 을 사용 하 는 것 이 아니 라 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 을 사용 하여 더 많은 선택 을 할 수 있 습 니 다.devtool 옵션 과 플러그 인 을 동시에 사용 하지 마 십시오.devtool 옵션 은 내부 에 플러그 인 을 추 가 했 기 때문에 두 번 의 플러그 인 을 사용 할 수 있 습 니 다.
실례 상세 설명
1.새 print.js

export default function printMe() {
 console.log('   @222');
}

2.새로운 index.js

import printMe from './print.js';
function component() {
 var element = document.createElement('div');
 var btn = document.createElement('button');
 btn.innerHTML = 'Click 1me and check 1the console!';
 btn.onclick = printMe;
 element.appendChild(btn);
 return element;
}
document.body.appendChild(component());

3.새 webpack.config.js

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
 entry: './src/index.js',
 output: {
  filename: '[name].js',
  path: path.resolve(__dirname, 'dist')
 },
 plugins: [
  new CleanWebpackPlugin(['dist']),
  new HtmlWebpackPlugin({
   title: ' webpack devtool'
  })
 ]
};

4.다른 devtool 옵션 사용
 none
포장 후 인쇄 단 추 를 누 르 면 console 에 main.js:96 이 표 시 됩 니 다.코드 생 성 은 다음 과 같 습 니 다.

eval
eval 모드 는 모든 module 을 패키지 합 니 다. eval 에 감 싸 서 실행 하고 끝 에 주석 을 추가 합 니 다.
Each module is executed withevaland//@ sourceURL.
포장 후 인쇄 단 추 를 누 르 면 console 에 print.js:3 이 표 시 됩 니 다.코드 생 성 은 다음 과 같 습 니 다.

source-map
포장 하면 output 디 렉 터 리 에 하나 더 있 는 걸 발견 할 수 있 을 거 예요. index.js.map 파일,이 파일 은 소스 맵 행렬 정보 가 소스 코드 를 어떻게 비 추 는 지 기록 합 니 다.인쇄 단 추 를 누 르 면 console 에 print.js:3 을 표시 합 니 다.코드 생 성 은 다음 과 같 습 니 다.

main.js

main.js.map
hidden-source-map
포장 후 main.js 는 source-map 옵션 에 비해 끝 설명 이 적 지만 output 디 렉 터 리 에 있 는 index.js.map 는 적지 않 습 니 다.인쇄 단 추 를 누 르 면 console 에서 main.js:96 을 표시 합 니 다.
inline-source-map
포장 후 끝 에 있 는 주석 sourceMap 을 볼 수 있 습 니 다. DataURL bundle 에 포 함 된 형식 입 니 다.sourceMap 의 모든 정보 가 bundle 에 추가 되 어 전체 bundle 파일 이 커 졌 습 니 다.인쇄 단 추 를 누 르 면 console 에 print.js:3 을 표시 합 니 다.코드 생 성 은 다음 과 같 습 니 다.

main.js
eval-source-map
eval 과 유사 하지만 주석 에 있 는 sourceMap 은 모두 DataURL 로 전 환 됩 니 다.console 에 print.js?dc 38:2 를 표시 합 니 다.생 성 코드 는 다음 과 같 습 니 다.

main.js
cheap-source-map
소스 맵 생 성 결과 와 차이 가 많 지 않 습 니 다.output 디 렉 터 리 의 index.js 내용 이 같 습 니 다.그러나 cheap-source-map 에서 생 성 된 index.js.map 의 내용 은 source-map 에서 생 성 된 index.js.map 보다 코드 가 적 습 니 다.위의 source-map 에서 생 성 된 index.js.map 의 결 과 를 비교 해 보 니 source 속성 에 열 정보 가 없습니다.다음 과 같 습 니 다.

main.js.map
cheap-module-source-map
하나의 단독 파일 에서 열 맵 이 없 는 맵 을 만 들 고 열 맵 이 없 으 면 포장 속 도 를 높 일 수 있 지만 브 라 우 저 개발 자 도 구 는 구체 적 인 줄 에 만 대응 할 수 있 고 구체 적 인 열(기호)에 대응 하지 못 하면 디 버 깅 에 불편 을 줄 수 있 습 니 다.
총결산
 개발 환경 추천 사용:
1.eval:각 모듈 은 eval()과/@sourceURL 을 사용 하여 실 행 됩 니 다.이것 은 매우 빠르다.원본 코드 가 아 닌 변환 코드 에 매 핑 되 었 기 때문에 줄 번 호 를 정확하게 표시 하지 않 은 것 이 단점 입 니 다.
2.eval-source-map:각 모듈 은 eval()을 사용 하여 실행 되 며,SourceMap 은 DataUrl 로 eval()에 추 가 됩 니 다.처음에는 느 렸 지만 빠 른 재건 속도 와 실제 파일 을 제공 했다.원본 코드 에 매 핑 되 었 기 때문에 줄 번호 가 정확하게 매 핑 되 었 습 니 다.그것 은 최고의 개발 자원 을 만 들 었 다.
3.cheap-eval-source-map:eval-source-map 와 유사 하 며 각 모듈 은 eval()로 실 행 됩 니 다.열 맵 이 없습니다.줄 번호 만 표시 합 니 다.이 는 로 더 에서 온 소스 코드 를 무시 하고 eval devtool 과 비슷 한 변환 코드 만 표시 합 니 다.
4.cheap-module-eval-source-map:cheap-eval-source-map 와 유사 합 니 다.이 예 에서 로 더 에서 온 소스 맵 이 처리 되 어 더 좋 은 결 과 를 얻 을 수 있 습 니 다.그러나,캐리어 원본 맵 은 각 줄 의 단일 맵 으로 간소화 되 었 다.
생산 환경 추천 사용:
1.(none):(devtool 옵션 생략)-SourceMap 을 실행 하지 않 습 니 다.이것 은 매우 좋 은 선택 이다.
2.source-map:완전한 SourceMap 은 하나의 단독 파일 입 니 다.bundle 인용 주석 이 추가 되 었 기 때문에 개발 도 구 는 어디서 찾 을 수 있 는 지 알 고 있 습 니 다.
3.hidden-source-map:source-map 와 같 지만 bundle 에는 인용 주석 을 추가 합 니 다.SourceMaps 가 오류 보고서 에서 오류 스 택 추적 을 매 핑 하 기 를 원 하지만 브 라 우 저 개발 도구 에 SourceMap 을 노출 시 키 지 않 으 려 면 이 옵션 을 사용 하 십시오.
4.nosources-source-map:하나의 SourceMap 은 소스 코드 가 없 는 상태 에서 만 들 어 졌 습 니 다.모든 소스 코드 가 노출 되 지 않 고 클 라 이언 트 컴퓨터 에 스 택 추적 을 표시 하 는 데 사용 할 수 있 습 니 다.웹 서버 에 원본 맵 파일 을 배치 할 수 있 습 니 다.