How to split code using webpack on angular 2 application?

Question

I have an application 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 the code to break my application into something like this:

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

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

Any conclusions or help would be appreciated. I study this all morning.

Angular documentation offers here , but there are no examples or tutorials that I can find. So it's possible, but no one knows how to do this?

you can find webpack configuration here

Answer 1

You will need to place each 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 make sure that the code is not duplicated at the different entry points installed in the chons commons plugin. Order is an important code found in the application, and then also important in the dashboard, or users will be displayed only in the last one that is present / required.

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

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