如何在angular 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，但沒有例子，或者我能找到的教程。所以這是可能的，但沒有人知道如何去做。

，你可以找到的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