2ウェイアプリでwebpackでコードを分割するにはどうすればよいですか？

Question

私はこのようなアプリの構造を有する：私はこれを行うことができる方法の例を見つけることができないよう

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

：

├── /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 

をそして、私はこのような何かに私のアプリを分割コーディングしたいですwebpackで。だから2つの質問。これはできますか？そして、どのようにこれを行うことができますか？

ご迷惑をおかけして申し訳ございません。私は今朝このことを研究しています。

角度のあるドキュメントには、hereが示されていますが、見つけることができる例やチュートリアルはありません。それで、それは可能ですが、誰もそれをやる方法を知らないのですか？

あなたはWebPACKの構成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