如何在 Angular 2 应用中使用 webpack 进行代码分割？

Question

我有这样一个应用程序结构：

├── /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的相关例子。所以有两个问题。这能做到吗？如何做到？

如果您有任何线索或帮助，将不胜感激。我一上午都在研究这个问题。

Angular文档建议在这里使用代码拆分，但我没有找到任何示例或教程。所以这是可能的，但是没有人知道如何做吗？

您可以在这里找到webpack配置。

- Jason Spick

Answer 1

您需要将它们中的每一个作为入口点。

entry: {
  'dashboard': './src/dashboard/index.ts',
  'users': './src/users/index.ts',
  'login': './src/login/index.ts',
  'app': './src/app.module.ts'
}

为了确保不同入口点中没有重复的代码，请使用commons chunk插件进行设置。顺序很重要，代码在app中遇到后，在dashboard或用户中也很重要，只会出现在最后一个需要它的地方。

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

你可以从这里获得一些灵感： https://angular.io/docs/ts/latest/guide/webpack.html#!#common-configuration

- Eldin

---

我没有得到我期望的行为。我正在使用异步路由，例如：{ path: 'dashboard', loadChildren: () => System.import('./dashboard') }，但是当我添加了你的代码后，该文件在应用程序初始化时被加载。也许我有一些错误的配置？ - Jason Spick

现在它是否生成了单独的文件？你能把你的webpack配置添加到你的帖子中吗？ - Eldin

我已经添加了一个链接。 - Jason Spick

是因为HtmlWebpackPlugin会将所有代码块注入到索引模板中吗？ - Tirinoarim