How do I do code splitting with webpack on angular 2 app?

Question

I have an app structure like this:

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

And I want to code split my app into something like this:

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

I cannot seem to find an example of how I can do this with webpack. So 2 questions. Can this be done? And, How can this be done?

Any leads or help would be appreciated. I have been researching this all morning.

Angular documentation suggests it here , but no examples or tutorials that I can find. So it's possible, yet no one know how to do it?.

you can find the webpack configuration here

Answer 1

You will have to put each one of them as an entry point

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

and then to make sure no code is duplicate across the different entry points set them in the commons chunk plugin. The order is important code encountered in app and subsequently also important in dashboard or users will only show up in the last one it is present/required in.

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

you can also get some inspiration from here: https://angular.io/docs/ts/latest/guide/webpack.html#!#common-configuration