angular.js - 웹팩 패키징 대규모 SPA 구성 문제

Question

현재 프로젝트는 다중 페이지 애플리케이션입니다. 사용되는 프런트엔드 도구는angular1.x 및 Webpack입니다. SPA로 전환하려면 라우팅 관리를 위해 angle-ui-router를 사용할 계획입니다.
문제는 모든 파일을 하나로 묶는 것이 너무 크다는 것입니다. Vendor.js만 특정 비즈니스 로직과 관련된 3차 클래스 라이브러리와 app.js로 패키징하는 것이 아이디어입니다.
예를 들어 로그인 페이지의 경우 Vendor.js와 login.js만 로드한 다음 로그인하려고 합니다. 대시보드 페이지로 이동합니다. 또한 Vendor.js와 dashborard.js만 로드하고 싶습니다. 이와 유사합니다
Angular-ui-router 및 webpack을 구성하는 방법, 감사합니다.

Answer 1

디렉토리 구조가 다음과 같다고 가정하세요

으아아아

코드 블록

common/utils.js

으아아아

login/index.js

으아아아

dashboard/index.js

으아아아

기대하는 결과를 얻으려면 webpack.config.js다음과 같이 구성하세요.

으아아아

포장 후 최종 결과

으아아아

위와 같습니다. . .

Answer 2

참조 코드 분할

Answer 3

이제 webpack을 사용하여 필요한 js를 생성할 수 있습니다. Angle-ui-router와 함께 다양한 js를 도입하는 방법은 무엇입니까? 감사합니다

Angular On-Demand 로딩에 대한 기사를 찾았습니다

http://www.cnblogs.com/ys-ys/..., ui-router를 기반으로 하면 ocLazyLoad
가 내 요구 사항을 충족하는 것 같습니다. 감사합니다