如何在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