如何在angular 2应用程序上使用webpack进行代码分割？

发布时间：2020-12-17 08:52:07 所属栏目：安全来源：网络整理

导读：我有这样的应用程序结构： ├── /dashboard│ ├── dashboard.css│ ├── dashboard.html│ ├── dashboard.component.ts│ ├── dashboard.service.ts│ ├── index.ts├── /users│ ├── users.css│ ├── users.html│ ├── users.co

我有这样的应用程序结构：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!