Frontend 서버 webpack, resource download

Frontend를 웹서버에 Deploy하고 필요시 webpack 자원과 소스코드를 다운로드 받아야 할 때가 있다.

 

보통 웹 브라우저로 웹 접속 후 Chrome 개발자 도구에서 sources 항목을 보면 디버그 모드로 deploy된 경우 webpack 소스와 application 소스들이 열람이 가능하다.

 

개발 중 띄운 Frontend 웹페이지에 접속 하고 크롬 브라우저 F12로 개발자 모드를 열고 Sources 항목에 들어가 보면 좌측에 로딩 되어 있는 소스와 webpack 결과물들이 열람가능함을 볼 수 있다.

 

 

로딩되어 있는 소스 파일들을 다운받으려면 chrome 웹 스토어에 있는 Resource Saver라는 확장 프로그램을 설치하면 된다.

크롬 웹 스토어에 진입해서 resource saver로 검색하면 된다.

 

 

Resource Saver 앱을 클릭하고 우측에 Chrome에 설치 버튼을 눌러서 설치한다.

 

 

설치한 후 개발자 도구를 열어 보면 상단에 Resource Saver 탭이 생긴것을 볼 수 있다.

 

 

다운로드를 원하고자 하는 페이지에 진입 후 Resource Saver 탭을 선택한다. 좌측에 여러가지 옵션이 있고 기본값을 그냥 사용하면 Sources 탭에 보이는 모든 소스를 다운로드 받아서 zip파일로 묶어 준다. 우측의 Save All  Resources 버튼을 ㅡ클릭한다.

 

 

버튼을 클릭하면 다운로드 화면과 압축 화면이 보이고 완료 시 브라우저 파일다운로드로 zip파일이 다운로드 된다.

 

 

-- The End --