WebStorm + webpacker 디버깅

Question

Hello StackOverflow 커뮤니티!

저희 팀에서는 일부 프로젝트가 반응하는 부분 인 루비 프로젝트를 진행하고 있습니다. js 파일을 팩으로 묶는 webpacker gem을 사용하고 있습니다.

프로젝트와 함께 작동하도록 WebStorm을 설정하려고하지만 디버거에 문제가 있습니다. Webstorm이 중단 점을 지정하지 않습니다. 별도의 터미널 인스턴스에 rails s 및 ./bin/webpack-dev-server을 시작하고 Chrome 확장 프로그램을 설치하고 자바 스크립트 디버그 구성을 생성하여 반응 앱이있는보기 (포트 3000에서)를 가리 킵니다. 또한 웹팩 구성에 devtool: 'eval'을 추가했습니다. 크롬 개발자 도구에서 나는 webpack:// 소스를보고 성공적으로 중단 점을 설정할 수 있습니다.

브레이크 포인트가 작동하도록이 도구를 구성하는 방법은 무엇입니까?

Answer 1

일반적으로 webpack에 번들 된 응용 프로그램을 디버깅하는 데 필요한 것은 원본 맵이 제대로 생성되었는지 확인하는 것입니다. 가장 좋은 선택은 devtool: 'source-map'입니다 (https://webpack.js.org/configuration/devtool/ 참조). eval 소스 맵이 정확하지 않고 디버깅하기에 적합하지 않습니다 (품질은 "원래 코드"보다는 "생성 된 코드"). 경우에 따라 URL 매핑을 지정해야 할 수도 있습니다. 자세한 내용은 https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/을 참조하십시오. 그러나 수십 가지 방법으로 webpack을 구성 할 수 있으므로 모든 구성마다 작동 할 수있는 일반적인 지침이 없습니다. 따라서 디버그하려는 프로젝트를 제공하지 않는 한 정확한 단계에 대해서는 거의 조언 할 수 없습니다.