Angular CLI如何为每个组件生成和引用JS文件

Question

我是Angular的新手。我正在使用Angular CLI来创建项目和组件。我知道如何创建项目并使用CLI运行它。我还在尝试理解Angular的基础知识。 有人可以帮我理解以下内容，

1）组件是不同的文件。 Webpack是否通过捆绑所有ts文件生成单个文件？那么模块导入机制如何工作？我们使用文件路径导入模块。

2）这些生成的js文件/文件如何在html文件中引用？当我打开index.html文件时，我只看到对inline.bundle.js，polyfills.bundle.js，styles.bundle.js，vendor.bundle.js和main.bundle.js的引用。这些文件是什么？

提前致谢。

更新

这是我到目前为止所学到的。

• Angular CLI配置文件是.angular-cli.json

• Angular使用tsc（Typescript Compiler）将EC6转换为EC5。配置文件是tsconfig.json

• Angular使用Webpack捆绑js和css文件以组合并传递给浏览器。默认情况下，Angular CLI管理基础Webpack配置。 webpack.config.js是配置文件。可以使用“ng eject”命令导出文件。

• Angular在编译代码时使用CommonJS作为模块目标。 CommonJS + Webpack将Typescript的Native EC6模块转换为支持浏览器的单个文件（main.boundle.js）模块系统。

@LorenzoImperatrice回答了我的第二个问题。 ：）

Answer 1

1）是的， AngularCLI （使用Webpack）生成一个文件，其中包含来自其中每个组件的所有代码，您可以通过运行ng build来查看此文件，在名为＆＃34; dist＆＃34;的根文件夹中创建一个目录，此时只需搜索main.bundle.js，即可看到生成的代码。该应用程序的编译器选项位于文件＆＃34; tsconfig.app.json＆＃34;和＆＃34; tsconfig.json＆＃34;。大多数时候你根本不想修改这些文件。

2）正如我在第1点所说，生成一个包含所有内容的唯一文件（main.boundle.js）。

• inline.bundle.js ：它是用于引导Webpack并加载其他文件的Webpack加载程序广告
• polyfills.bundle.js ：它用于支持不同的浏览器，并根据文件＆＃34; polyfills.ts＆＃34;。
创建。
• styles.bundle.js ：它用于在应用程序中注入所需的常规样式，可以自定义从文件中注入的内容＆＃34; .angular-cli.json＆ ＃34;
• vendor.bundle.js ：＆＃34; styles.bundle.js＆＃34;但是使用js脚本