Как выполнить разделение кода с помощью веб-пакета в приложении angular 2?

У меня есть такая структура приложения:

├── /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 angular code-splitting
person Jason Spick    schedule 27.09.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вам нужно будет поставить каждый из них в качестве точки входа

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

person Eldin    schedule 27.09.2016
comment
Я не получаю ожидаемого поведения. Я использую асинхронные маршруты, например: {path: 'dashboard', loadChildren: () => System.import('./dashboard') }, но когда я добавляю ваш код выше, файл загружается при инициализации приложения. Может у меня какие-то неправильные настройки? - person Jason Spick; 28.09.2016
comment
Однако теперь он генерирует отдельные файлы? Не могли бы вы добавить конфигурацию своего веб-пакета в свой пост? - person Eldin; 29.09.2016
comment
Я добавил ссылку. - person Jason Spick; 29.09.2016
comment
Это потому, что HtmlWebpackPlugin вставит ВСЕ фрагменты в шаблон индекса? - person Tirinoarim; 23.12.2016