브라우저 디버깅을 허용하도록 웹팩 구성

130

나는 webpack을 처음 사용하고 기존 웹 응용 프로그램을 사용하도록 변환하고 있습니다.

웹 패키지를 사용하여 JS를 번들로 만들고 축소하는 것은 배포 할 때 훌륭하지만 개발 중에 디버깅하기가 매우 어렵습니다.

일반적으로 Chrome의 내장 디버거를 사용하여 JS 문제를 디버깅합니다. (또는 firefox의 Firebug). 그러나 webpack을 사용하면 모든 파일이 하나의 파일에 채워지고 해당 메커니즘을 사용하여 디버깅하기가 어려워집니다.

번 델링을 빠르게 켜고 끄는 방법이 있습니까? 또는 축소를 켜고 끄는가?

스크립트 로더 구성이나 다른 설정이 있는지 확인했지만 난색으로 보이지 않습니다.

아직 모듈처럼 작동하고 사용하기 위해 모든 것을 변환 할 시간이 없었습니다. 따라서로드에 require ( "script! ./ file.js") 패턴을 사용합니다.

javascript webpack

— 짐
소스

3

이 문제에 대한 해결책을 찾았습니까? 또한 JS 콘솔을 사용하여 사용 가능한 변수를 보는 것이 좋습니다. 내 주요 문제는 webpack이 모듈 내부에서 이러한 모든 변수를 숨기므로 액세스 할 수

— 없다는 것입니다.

2

실제로 솔루션을 찾지 못했기 때문에 불행히도 webpack 사용을 중단했습니다.

— Jim

지금 무엇을 사용하십니까? 웹팩을 작성할 당시에도 여전히 가장 인기있는 빌드 도구 인 것 같습니다.

— Richard

100

소스 맵 을 사용 하여 소스 코드와 번들 / 축소 된 코드 간의 매핑 을 유지할 수 있습니다 .

Webpack은 개발자 도구에서 번들 파일의 소스 맵을 생성하기 만하면 디버깅을 향상시키는 devtool 옵션을 제공합니다. 이 옵션은 명령 행에서 사용하거나 webpack.config.js 구성 파일 에서 사용할 수 있습니다 .

아래에서 명령 행을 사용하여 생성 된 소스 맵 파일 ( bundle.js.map ) 과 함께 번들 파일 ( bundle.js ) 을 생성하는 유용한 예제를 찾을 수 있습니다 .

$ webpack --devtool source-map ./entry.js bundle.js
Hash: b13b8d9e3292806f8563
Version: webpack 1.12.2
Time: 90ms
        Asset     Size  Chunks             Chunk Names
    bundle.js  1.74 kB       0  [emitted]  main
bundle.js.map  1.89 kB       0  [emitted]  main
   [0] ./entry.js 85 bytes {0} [built]
   [1] ./hello.js 59 bytes {0} [built]

index.html

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

entry.js

var hello = require('./hello.js');
document.body.innerHTML += 'It works ' + hello();

hello.js

module.exports = function () {
  return 'Hello world!';
};

브라우저에서 index.html 을 열면 (Chrome을 사용하지만 다른 브라우저에서도 지원된다고 생각합니다) file : // 구성표 아래에 번들 파일이있는 소스 탭 과 아래의 소스 파일이 소스 탭에 표시 됩니다 특별한 webpack : // 체계.

그리고 네, 원본 소스 코드를 가지고있는 것처럼 디버깅을 시작할 수 있습니다! 한 줄에 중단 점을두고 페이지를 새로 고치십시오.

— 데스 캣
소스

2

bundle.map은 js 파일을 가리 키지 만 실제 js 파일에 tsx 또는 ts라고 할 수있는 맵이있는 경우 어떻게해야합니까?

— Andrej Kovacik

4

나는 생산 및 개발 모드를 사용하여 프로젝트 설정에 그것의 더 나은 생각 https://webpack.js.org/guides/production/ 그것 또한 디버깅 코드를 매핑하는 방법을 포함

devtool: 'inline-source-map'

— 엠파 한
소스

3

소스 맵은 이미 지적했듯이 매우 유용합니다.
그러나 때때로 사용할 소스 맵을 선택하는 것이 어려울 수 있습니다.

Webpack 소스 맵 문제 중 하나에 대한 이 의견 은 요구 사항에 따라 사용할 소스 맵을 선택하는 데 도움이 될 수 있습니다.

— 아비 나브 싱기
소스

1

여기를 봐

그것은 자바 스크립트를 약화시키는 아름다움입니다. 하단에는 브라우저에 대한 다양한 플러그인 및 확장 프로그램 목록이 있으며 확인하십시오.

FireFox Deminifier에 관심이 있으시 다면 서버에서 검색 할 때 자바 스크립트를 축소하고 스타일을 지정해야합니다.

여기에 이미지 설명을 입력하십시오

— 바나나
소스

10

축소는 주석이 여전히 제거되고 줄 번호가 더 이상 일치하지 않으며 변수 이름이 동일하지 않기 때문에 축소를 비활성화하는 것과 다릅니다. 그것은 아무것도 아니라고 말하는 것이 좋습니다.

— Jim

1

크롬은 또한 디버거에 형식 옵션이 있습니다. 일반적인 소스 파일에 필요한 모든 정보는 없지만 시작이 좋으며 중단 점을 설정할 수도 있습니다. 클릭 한 버튼은 첫 번째 스크린 샷의 왼쪽 하단에 있으며 {}처럼 보입니다.

포맷하기 전에 :

포맷 후.

— 졸리 1234
소스