각도 2 앱에서 webpack으로 코드 분할을 수행하려면 어떻게해야합니까?

Question

이 같은 앱 구조를 가지고 :

├── /dashboard 
│ ├── dashboard.css 
│ ├── dashboard.html 
│ ├── dashboard.component.ts 
│ ├── dashboard.service.ts 
│ ├── index.ts 
├── /users 
│ ├── users.css 
│ ├── users.html 
│ ├── users.component.ts 
│ ├── users.service.ts 
│ ├── index.ts 
├── /login 
│ ├── login.css 
│ ├── login.html 
│ ├── login.component.ts 
│ ├── login.service.ts 
│ ├── index.ts 
├── app.component.ts 
├── app.module.ts 
├── app.routes.ts 
├── app.styles.css 

을 그리고 나는 이런 식으로 뭔가에 내 응용 프로그램을 분할 원하는 코드를 :

├── dashboard.js 
├── users.js 
├── login.js 
├── app.js 

는 내가이 작업을 수행 할 수있는 방법의 예를 찾을 수 없습니다 webpack. 그래서 2 질문. 이 작업을 수행 할 수 있습니까? 그리고, 어떻게 할 수 있습니까?

모든 리드 또는 도움을 주시면 감사하겠습니다. 나는 아침 내내 이걸 연구 해왔다.

각도 설명서에는 here이 나와 있지만 예제 나 자습서가 없습니다. 그래서 그것은 가능합니다, 그러나 아무도 그것을하는 방법을 알지 못합니까?.

당신은 웹팩 구성 here

Answer 1

당신은 확실히 더 코드가 설정 한 다른 진입 점을 통해 중복없는 만들기 위해 다음 진입 점으로

entry: { 
    'dashboard': './src/dashboard/index.ts', 
    'users': './src/users/index.ts', 
    'login': './src/login/index.ts', 
    'app': './src/app.module.ts' 
} 

를 그들의 각 하나를 넣어해야합니다을 찾을 수 있습니다 커먼즈 청크 플러그인에 포함되어 있습니다. 순서는 중요 코드 응용 프로그램에 발생하여 이후도 중요 대시 보드 또는 사용자는이 요구/존재 마지막에 표시됩니다되어

plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: ['app', 'dashboard', 'login', 'users'] 
    }) 
] 

당신이 여기에서 영감을 얻을 수 있습니다. https://angular.io/docs/ts/latest/guide/webpack.html#!#common-configuration