如果我检查使用 angular-cli 创建的 angular 2 项目的 index.html 文件，我可以看到该页面仅包含 dist 文件夹中的 3 个文件：
inline.bundle.js
vendor.bundle.js
main.bundle.js
但现在我试图了解每个文件的作用。我用 angular-cli 编写了组件，我已经降级，所以我可以在另一个用 angular 1 编写的应用程序中使用它。如果我只是将这 3 个文件添加到我的 index.html 中，再加上添加 app.module.ts 文件，好像我升级我的应用程序，一切正常。我试图理解为什么，因为谷歌角度教程没有谈论 angular-cli 以及它如何帮助迁移。
【问题讨论】：
标签： angular components angular-cli
让我们看看：
这是一个 webpack 加载器。加载其他文件时需要的带有 Webpack 实用程序的小文件。
最终这将被写入 index.html 文件本身，而不是作为单独的文件生成。
这是默认在 dev 模式下生成的，在 prod 模式下默认被忽略（ng build -prod 或 ng serve -prod）。
它包含 Angular 库，几乎没有修改。这是为了加快构建过程。还有一些人认为，当它们没有太大变化时，将它们保存在一个单独的文件中是个好主意，然后可以缓存更长时间。
不过，典型的 Angular 方法是将它们合并到主包中，这样做时，运行 Webpack tree-shaking，它会删除从未从应用程序中的任何其他模块及其导入中导入的任何 EcmaScript / TypeScript 模块。这意味着最终的捆绑包要小得多。例如，在运行 Ahead of Time 编译器 (AoT) 时，Angular Compiler 会被摇晃掉。
您可以通过设置参数--vendor-chunk 来明确控制是否生成单独的供应商捆绑包。
您自己的代码，以及您导入的任何其他内容等，如前一点所述。
【讨论】：
从 Angular 6 开始，生成的文件的名称中不再包含 .bundle 或 .chunk。 main.bundle.js 现在是 main.js，admin.module.chunk.js 现在是 admin-admin-module-ngfactory.js，反映我的 AdminModule 在我项目的一个 admin 目录中。那是为了让人们在不同的位置拥有两个同名的模块。并且 inline.bundle.js 已重命名为 runtime.js。
【讨论】：