我有这样的应用程序结构:
├── /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文档建议它为here,但没有我能找到的示例或教程.所以这是可能的,但没有人知道该怎么做?
你可以找到webpack配置here
您必须将每一个作为切入点
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