如何在angular 2应用上使用webpack进行代码拆分？ [英] How do I do code splitting with webpack on angular 2 app?

问题描述

我的应用程序结构如下：

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

我似乎找不到如何使用webpack进行操作的示例。所以有两个问题。能做到吗？而且，该怎么办？

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文档建议此处，但找不到任何示例或教程。因此有可能，但没人知道如何做到这一点。

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?.

您可以找到webpack配置此处

you can find the webpack configuration here

推荐答案

您将必须将其中每个作为入口点

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'
}

然后确保在不同的入口点没有重复的代码，在commons chunk插件中设置它们。订单是应用程序中遇到的重要代码，随后在仪表板中也很重要，否则用户只会显示在当前存在/需要的最后一个代码中。

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'] 
    })
]

您也可以从这里得到一些启发：
https://angular.io/docs/ts/latest/guide/webpack .html＃！＃common-configuration

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

这篇关于如何在angular 2应用上使用webpack进行代码拆分？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！