如何在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個問題。 可以這樣做嗎？ 而且，如何做到這一點？

任何線索或幫助將不勝感激。 我整個上午一直在研究這個問題。

Angular文檔在這里提出了建議，但沒有我能找到的示例或教程。 所以這是可能的，但沒有人知道該怎么做？

你可以在這里找到webpack配置

Answer 1

您必須將每一個作為切入點

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

然后確保沒有代碼在不同的入口點重復設置它們在commons chunk插件中。 訂單是應用程序中遇到的重要代碼，隨后在儀表板中也很重要，或者用戶只會出現在最后一個存在/需要的位置。

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

你也可以從這里獲得一些靈感： https ： //angular.io/docs/ts/latest/guide/webpack.html#！#common-configuration