나는 webpack을 처음 사용하고 기존 웹 응용 프로그램을 사용하도록 변환하고 있습니다.
웹 패키지를 사용하여 JS를 번들로 만들고 축소하는 것은 배포 할 때 훌륭하지만 개발 중에 디버깅하기가 매우 어렵습니다.
일반적으로 Chrome의 내장 디버거를 사용하여 JS 문제를 디버깅합니다. (또는 firefox의 Firebug). 그러나 webpack을 사용하면 모든 파일이 하나의 파일에 채워지고 해당 메커니즘을 사용하여 디버깅하기가 어려워집니다.
번 델링을 빠르게 켜고 끄는 방법이 있습니까? 또는 축소를 켜고 끄는가?
스크립트 로더 구성이나 다른 설정이 있는지 확인했지만 난색으로 보이지 않습니다.
아직 모듈처럼 작동하고 사용하기 위해 모든 것을 변환 할 시간이 없었습니다. 따라서로드에 require ( “script! ./ file.js”) 패턴을 사용합니다.
답변
소스 맵 을 사용 하여 소스 코드와 번들 / 축소 된 코드 간의 매핑 을 유지할 수 있습니다 .
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 : // 체계.
그리고 네, 원본 소스 코드를 가지고있는 것처럼 디버깅을 시작할 수 있습니다! 한 줄에 중단 점을두고 페이지를 새로 고치십시오.
답변
나는 생산 및 개발 모드를 사용하여 프로젝트 설정에 그것의 더 나은 생각
https://webpack.js.org/guides/production/
그것 또한 디버깅 코드를 매핑하는 방법을 포함
devtool: 'inline-source-map'
답변
소스 맵은 이미 지적했듯이 매우 유용합니다.
그러나 때때로 사용할 소스 맵을 선택하는 것이 어려울 수 있습니다.
Webpack 소스 맵 문제 중 하나에 대한 이 의견 은 요구 사항에 따라 사용할 소스 맵을 선택하는 데 도움이 될 수 있습니다.
답변
여기를 봐
그것은 자바 스크립트를 약화시키는 아름다움입니다. 하단에는 브라우저에 대한 다양한 플러그인 및 확장 프로그램 목록이 있으며 확인하십시오.
FireFox Deminifier에 관심이 있으시 다면 서버에서 검색 할 때 자바 스크립트를 축소하고 스타일을 지정해야합니다.
답변
크롬은 또한 디버거에 형식 옵션이 있습니다. 일반적인 소스 파일에 필요한 모든 정보는 없지만 시작이 좋으며 중단 점을 설정할 수도 있습니다. 클릭 한 버튼은 첫 번째 스크린 샷의 왼쪽 하단에 있으며 {}처럼 보입니다.
포맷하기 전에 :
포맷 후.
답변
