Angular2 WebPack 디버깅을위한 번들링은 영원히 필요합니다.

Question

저는 Angular2 CLI를 사용하여 프로젝트 스캐 폴딩을 작성했습니다. 그것은 Webpack을 사용합니다. 개발을 할 때마다 변경하고 저장할 때마다 Webpack에서 번들을 다시 만들어야 내 페이지를 새로 고침하고 변경 사항을 볼 수 있습니다. 실제로는 10-12 초 밖에 걸리지 않지만 디버깅의 경우 이는 매우 어려운 일입니다. 때로는 페이지를 번들하고 다시로드하는 데 4 배의 시간이 걸리기도합니다. 그것은 미친 짓이야. 내가 잘못하고 있니? Angular CLI 또는 webpack 설정을 변경하지 않았으므로 어디서부터 시작해야할지 모를 것입니다. 내 프로젝트는 (아직) 특히 크지 않습니다. 5-6 개의 간단한 구성 요소가 있습니다.

아이디어가 있으십니까?

감사합니다,

데이브

이 조금 빌드, 당신의 웹팩 설정에서이를 추가 할 수 있습니다

Answer 1

;

cache: true, 
    devtool: 'cheap-module-source-map', 

이 체크 아웃 : https://webpack.github.io/docs/build-performance.html

Answer 2

두 가지 옵션을 개발하는 동안 웹팩을 가속화합니다.

1. Webpack DLL을 사용하여 라이브러리를 미리 빌드 할 수 있습니다. 기본적으로 미리 작성하려는 모듈 목록이있는 javscript 파일 (예 : vendor.ts)을 가져 와서 다음 번에 각 모듈을 반복 작성하지 않고 webpack을 작성할 때 자동으로 사용되는 JS 파일을 생성합니다.

2. HMR (핫 모듈 다시로드)을 사용할 수 있습니다. 즉, webpack을 한 번 실행할 수 있으며 이후에 소스 파일 (javascript/html/CSS/LESS/etc)을 변경할 때까지 기다릴 것입니다. 저장을 클릭하면 webpack-dev-server가 파일을 변경했음을 감지하고 그 중 하나만 파일을 만들고 자동으로 소켓을 사용하여 브라우저로 전송하며 브라우저는 해당 모듈과 종속 모듈을 업데이트합니다 . 브라우저를 새로 고칠 필요가 없도록 동일한 앱 상태를 유지할 수 있으며 저장하기 전에 중단 한 부분에서 브라우저 상태가 계속됩니다.